Question

为了把它变成Q＆amp; A，我把我最初的绝望之情编辑成了技术点，

我正在使用我在文档中使用use元素引用的SVG符号。我用CSS设计了这些样式。我不想在CSS中设置高度和宽度，我只想设置其中一个，相应地缩放。

我在符号上设置了viewBox属性。但图形无法正确缩放。

<!DOCTYPE html>
<html>
  <head>
    <title>SVG Symbols</title>
    <style>
     body { margin: 20px; }
     .svg-large { width: 500px; fill: yellow;}
    </style>
  </head>
  <body>
    <svg style="display:none;">
      <symbol id="scary-smiley" viewBox="0 0 20 20">
	<circle cx="10" cy="10" r="9.5" stroke-width="1"
		stroke="black" />
	<circle cx="6" cy="7" r="1.5" fill="black"/>
	<circle cx="14" cy="7" r="1.5" fill="black"/>
	<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Teeth_by_David_Shankbone.jpg/320px-Teeth_by_David_Shankbone.jpg"
	       width="10" height="5.2" x="5" y="11"/>
      </symbol>
    </svg>
    <svg class="svg-large">
      <use xlink:href="#scary-smiley"/>
    </svg>
  </body>
</html>

Answer 1

以下代码已经在当前的Firefox，Chrome和名为Midori的基于Webkit的浏览器中进行了测试。

出于某种原因，在viewBox元素上定义symbol在Firefox和Chrome中没有完全预期的效果。但它确实具有一些效果，因为它使元素可以扩展。因此，如果您想在CSS中同时设置width 和 height，则可以这样做。

如果viewBox元素仅在symbol上指定，并且您只设置了width或height中的一个，那么在Firefox和Chrome中，另一个维度是根据HTML 5 whis中的默认对象大小为300x150像素。因此，在问题的示例中，您将获得一个500x150像素的元素，并缩放图形以适合该矩形。

如果您只想定义一个width或height而另一个相应缩放，那么在引用 SVG元素上定义viewBox就可以了：< / p>

<!DOCTYPE html>
<html>
  <head>
    <title>SVG Symbols</title>
    <style>
     body { margin: 20px; }
     .svg-large { width: 500px; fill: yellow;}
    </style>
  </head>
  <body xmlns:xlink="http://www.w3.org/1999/xlink">
    <svg style="display:none;">
      <symbol id="scary-smiley">
	<circle cx="10" cy="10" r="9.5" stroke-width="1"
		stroke="black" />
	<circle cx="6" cy="7" r="1.5" fill="black"/>
	<circle cx="14" cy="7" r="1.5" fill="black"/>
	<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Teeth_by_David_Shankbone.jpg/320px-Teeth_by_David_Shankbone.jpg"
	       width="10" height="5.2" x="5" y="11"/>
      </symbol>
    </svg>
    <svg class="svg-large" viewBox="0 0 20 20">
      <use xlink:href="#scary-smiley"/>
    </svg>
  </body>
</html>

Firefox'和Chrome的行为符合标准according to the SVG 2 specification，根据该行为<svg><use .../></svg>子句建立新的SVG视口。

引用SVG符号和CSS维度时的Viewbox位置

1 个答案: