缩放svg设置宽度（像素）及自动高度

我似乎不明白svg。我希望有人向我解释我错在哪里。所以我有一个内联svg：缩放svg设置宽度（像素）及自动高度

<div style="width:1000px; height:auto; background-color:blue;"> 
    <svg class="_image"><use xlink:href="#myId" /> 
     <symbol id="myId" viewBox="0 0 1000 700"> 
     <ellipse cx="200" cy="80" rx="100" ry="50" 
      style="fill:yellow;stroke:purple;stroke-width:2" /> 
     </symbol> 
    </svg> 
    </div>

div的宽度设置为1000px。 svg设置为100％宽度。它有一个viewBox。我现在希望svg的宽度为100％，这意味着宽度为1000px，然后相应地调整高度，因为它被设置为自动为div和svg本身。我期待这一点，因为我提供了一个viewbox。我哪里错了？

这里是CSS：

._image { 
    width: 100%; 
    height: auto; 
}

...一切放在一起作为一个小提琴：https://jsfiddle.net/hv6ejn98/2/

来源

2017-06-22 George Welder

https://css-tricks.com/scale-svg/ – CBroe

感谢。我已经看过这个教程（还有很多其他教程），他们都告诉我我需要一个viewbox，然后它适当地扩展。这似乎并不适用于我，所以我必须错过一些东西。这就是为什么我创建了这个最简单的例子，实际上并不多。所以，如果你可以更具体一点，那将不胜感激。 –

您的svg宽度为100％，即1000px。你的情况中的椭圆不是。尝试把一个SVG图像。它会像预期的那样扩展。然后你可以调试它。 –

SVG的设置为100％的宽度。它有一个viewBox。

不，它不。只有你的<symbol>。没有viewBox你的SVG不会缩放。如果您将一个viewBox添加到SVG，则所有内容都可以按照您的预期运行。

<div style="width:1000px; height:auto; background-color:blue;"> 
 
    <svg class="_image" viewBox="0 0 1000 700"><use xlink:href="#myId" /> 
 
     <symbol id="myId" viewBox="0 0 1000 700"> 
 
     <ellipse cx="200" cy="80" rx="100" ry="50" 
 
      style="fill:yellow;stroke:purple;stroke-width:2" /> 
 
     </symbol> 
 
    </svg> 
 
    </div>

来源

2017-06-22 13:22:19

好的，谢谢，那太棒了。我使用的符号，但是，因为我在一个精灵文件中使用它。这意味着我不能给svg一个viewBox - 因为它包含了我的整个项目的所有图像。请参阅https：// css-tricks。 com/svg-sprites-use-better-icon-fonts /并且在这里https://css-tricks.com/svg-symbol-good-choice-icons/。这个案例的任何建议？ –

取决于你的意思是“ sprite file“。如果你的意思是替换一个位图精灵文件，那么只需将你的SVG宽度和高度设置为与viewBox匹配即：'width =”1000“height =”700“viewBox =”0 0 1000 700“' 。如果你的意思是“从另一个文件访问的符号的集合”，那么viewBox需要进入另一个文件中，无论如何这个文件中的文件将被忽略。 –

缩放svg设置宽度（像素）及自动高度

回答

相关问题