即使没有指定viewbox，SVG也会生成viewbox

Question

我正在尝试创建一个SVG播放按钮，它只有按钮本身的大小，但似乎有某种类型的viewbox是自动生成的。这个phantom甚至与播放按钮的尺寸都不一样，似乎是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或高度/宽度的情况下将viewBox大小调整为SVG的大小？

Answer 1

外部SVG元素是一个被替换的元素。如果你没有提供任何关于大小的东西，你会得到默认的width which is 300px和默认的高度，它是宽度的50%，所以如果你也没有提供宽度值，它最终是150px。

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

Answer 2

@RobertLongson's answer解释了为什么会发生这种情况。下面是你可以做的一些事情：

您的circle的r="29.3"实际上是在标记中“指定高度/宽度”。如果您可以在那里设置一个值，我可以想象您实际上可以在svg的宽度或高度中设置相同的值。这里有一种不同的方法，你可以考虑到这一点。它确实需要一个viewbox，但它不会改变：0 0 100 100只允许我们对polygon的points使用百分比值。为了计算它们，我计算了你的点值/你的半径(例如21.9/58.6)。在svg上使用边框而不是circle元素可以减轻重量，并使标记更易于阅读。我已经在CSS中指定了宽度，但它也可以是内联的；您也可以只指定高度，或者让它相对于父级，等等。

(如果你用浏览器的检查器检查svg，你会看到它和圆圈的宽度和高度一样)

​

#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>

​

如果您确实不能使用viewbox、width或height，并且需要保留所有这些标记，那么您可以使用javascript来实现这一点。这是从a solution by @Almis改编的(但请参阅@PaulLeBeau's take on the issue)。overflow: visible是必要的，因为circle的笔划稍微超出了svg的范围(最终我们也许能够specify where a stroke is drawn，但现在还不能)。

​

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/