Question

我正在尝试创建一个只有按钮本身大小的SVG播放按钮，但似乎有某种视图框是自动生成的。这个幻像视图的尺寸与播放按钮的尺寸不同，似乎是2：1的比例。

#play-button {
  border: 1px dashed gray;
}

<svg id="play-button">
<style type="text/css">
  .st0{fill:none;stroke:#010101;stroke-miterlimit:10;}
  .st1{fill:#010101;}
</style>
<circle id="button-border" class="st0" cx="30" cy="29.9" r="29.3"/>
<polygon id="play-triangle" class="st1" points="21.9,15.7 46.6,29.9 21.9,44.1 "/>
</svg>

如何在不指定viewBox或高度/宽度的情况下将视图框的大小调整为SVG的大小？

Answer 1

外部SVG元素是替换元素。如果你没有为尺寸提供任何东西，你将获得默认的width which is 300px和默认高度，即宽度的50％，所以如果你还没有提供宽度值，那么最终成为150像素。

有多种方法可以指示您想要的高度和宽度。最明显的是高度和宽度属性或同名的CSS属性，但您也可以使用viewBox属性来定义宽度和高度。

Answer 2

@RobertLongson's answer explains why this is happening. Here are some things you can do about it:

Your circle's r="29.3" does in effect "specify a height/width" in the markup. If you can put a value there, I would imagine you actually can the same value in the svg's width or height instead. Here's a different approach you could take with that in mind. It does require a viewbox but one that doesn't change: 0 0 100 100 just lets us use percentage values for the polygon's points. To calculate them, I did yourpointvalue/yourradius (e.g. 21.9/58.6). Using a border on the svg instead of a circle element makes this lighter weight and makes the markup easier to read. I've specified the width in the CSS, but it could also be inline; you could also only specify the height, or have it relative to a parent, etc etc.

(If you check the svg with your browser's inspector, you'll see it's the same width and height as the circle)

#play-button {
  fill: #010101;
  border: 1px solid #000;
  border-radius: 50%;
  display: block;
  
  /* specify a width or a height either here or inline */
  width: 58.6px;
}

<svg id="play-button" viewbox="0 0 100 100">
  <polygon points="37.3,26.8 79.5,50 37.3,73.2" />
</svg>

If you really can't use viewbox, width, or height, and need to keep all that markup, you can achieve this with javascript. This is adapted from a solution by @Almis (but see @PaulLeBeau's take on the issue). The overflow: visible is necessary because the circle's stroke extends a little beyond the bounds of the svg. (Eventually we may be able to specify where a stroke is drawn, but not yet.)

var playButton = document.getElementById('play-button');
var boundingRect = document.getElementById('button-border').getBoundingClientRect();
playButton.style.height = boundingRect.height + 'px';
playButton.style.width = boundingRect.width + 'px';

#play-button {
  border: 1px dashed gray;
  overflow: visible; /* added */
}

<svg id="play-button">
  <style type="text/css">
    .st0 {
      fill: none;
      stroke: #010101;
      stroke-miterlimit: 10;
    }
    .st1 {
      fill: #010101;
    }
  </style>
  <circle id="button-border" class="st0" cx="30" cy="29.9" r="29.3" />
  <polygon id="play-triangle" class="st1" points="21.9,15.7 46.6,29.9 21.9,44.1 " />
</svg>

Answer 3

看起来答案是SVG的默认大小是300x150，这对我来说似乎很奇怪。

如果您不想要调整大小（并且您可能不应该依赖于该默认值），则必须指定此CSS Tricks文章中详细说明的大小： https://css-tricks.com/scale-svg/

即使没有指定，SVG也会生成一个视图框

3 个答案: