如何保持SVG内部元素的纵横比，同时允许SVG本身进行缩放？

Question

我对SVG很陌生，所以我很抱歉，如果这是一个明显的问题。我修了几个小时，好像撞上了一堵墙。

我试图创建一个HTML文件，该文件中的SVG元素：

• 在其外视口
• 牢固边界保持内部元件的纵横比
• 不保留方面外SVG元素
• 的比率可以任意地被调整大小，同时保持这些约束上

这说明的jsfiddle我的意思，什么我已经尝试：

http://jsfiddle.net/a8q6S/

下面是相同的代码，因为我不能以其他方式张贴此：

<div> 
    <h2>correct placement and aspect ratio, but cannot be resized without losing relative placement</h2> 

    <svg viewBox="0 0 100 100" style="width: 100px; height: 100px; border: 1px solid red;"> 
     <circle cx="0" cy="0" r="10"></circle> 
     <circle cx="50" cy="50" r="10"></circle> 
     <circle cx="100" cy="100" r="10"></circle> 
    </svg> 
</div> 
<div> 
    <h2>correct aspect ratio of circle, incorrect relative placement</h2> 

    <svg viewBox="0 0 100 100" preserveAspectRatio="xMinYMin" style="width: 200px; height: 100px; border: 1px solid red;"> 
     <circle cx="0" cy="0" r="10"></circle> 
     <circle cx="50%" cy="50%" r="10"></circle> 
     <circle cx="100%" cy="100%" r="10"></circle> 
    </svg> 
</div> 
<div> 
    <h2>correct relative placement, can be resized, but loses internal aspect ratio</h2> 

    <svg viewBox="0 0 100 100" preserveAspectRatio="none" style="width: 200px; height: 100px; border: 1px solid red;"> 
     <circle cx="0" cy="0" r="10"></circle> 
     <circle cx="50" cy="50" r="10"></circle> 
     <circle cx="100" cy="100" r="10"></circle> 
    </svg> 
</div> 

这可能吗？我是否以这种错误的方式去做？

Answer 1

你不能用纯SVG实现你想要的。您将需要使用一些JavaScript来调整SVG在加载和调整大小。

如果你使用类似你的第二个例子，你只需要调整viewBox，宽度和高度。内容可以保持不变。

例如，

<svg viewBox="0 0 100 100" style="width: 100px; height: 100px; border: 1px solid red;"> 
    <circle cx="0" cy="0" r="10"></circle> 
    <circle cx="50%" cy="50%" r="10"></circle> 
    <circle cx="100%" cy="100%" r="10"></circle> 
</svg> 

将成为

<svg viewBox="0 0 200 100" style="width: 200px; height: 100px; border: 1px solid red;"> 
    <circle cx="0" cy="0" r="10"></circle> 
    <circle cx="50%" cy="50%" r="10"></circle> 
    <circle cx="100%" cy="100%" r="10"></circle> 
</svg> 

当宽度加倍。

http://jsfiddle.net/a8q6S/3/

Answer 2

谢谢。我遇到了类似的问题。这是我的解决方案。

<svg viewBox="0 0 100% 100%" preserveAspectRatio="xMinYMin" style="width: 200px; height: 100px; border: 1px solid red;"> 
    <circle cx="0%" cy="0%" r="10"></circle> 
    <circle cx="50%" cy="50%" r="10"></circle> 
    <circle cx="100%" cy="100%" r="10"></circle> 
</svg> 

对不起，我也是新与svgs，感谢更正。

这并不直接解决问题，但我发现我无法保留viewbox内不保留长宽比的viewbox的宽高比。

对此解决方案的警告是，您必须建立每个内部svg的宽度和高度，除非不保留相对位置。

如果要保留相对位置和纵横比，请勿使用视图框。

<svg viewbox="0 0 100 100" preserveAspectRatio="xMinYMin" width=200 height=100 style="border: 1px solid red;"> 
    <svg> 
    <circle cx="0" cy="0" r="10"></circle> 
    <circle cx="50" cy="50" r="10"></circle> 
    <circle cx="100" cy="100" r="10"></circle> 
    </svg> 
    <svg viewbox="0 0 100 100" preserveAspectRatio="none" fill=blue width=200 height=100> 
    <circle cx="0" cy="0" r="7"></circle> 
    <circle cx="50" cy="50" r="7"></circle> 
    <circle cx="100" cy="100" r="7"></circle> 
    </svg> 
    <svg fill=red width=200 height=100> 
    <circle cx="0%" cy="0%" r="4"></circle> 
    <circle cx="50%" cy="50%" r="4"></circle> 
    <circle cx="100%" cy="100%" r="4"></circle> 
    </svg> 
</svg>