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

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元素是替换元素.如果你没有为尺寸提供任何东西,你将得到300px的默认宽度和宽度的50%的默认高度,所以如果你还没有提供宽度值,那么最终为150px .

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