Question

我对SVG很新，所以如果这是一个显而易见的问题我会道歉。我已经修了好几个小时，好像已经碰壁了。

我正在尝试在HTML文档中创建一个SVG元素：

在外部视口上有一个坚固的边界
保留内部元素的宽高比
不保留外部SVG元素的宽高比
可以在保持这些限制的同时任意调整大小

这个JSFiddle说明了我的意思和我的尝试：

这是相同的代码，因为我不能发布这个：

<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，width和height。内容可以保持不变。

例如，

<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

可以使用2个svg，其中一个保留为SVG，而另一个为不保留。最后一个将是上一个。

在我的示例中，我绘制了高度为100％的箭头，然后在其上绘制了圆圈。

<body style="height: 100%; width: 100%; margin: 0; background-color: grey">
<svg style="height: 100%; width: 10%; left: 10%; position: absolute; overflow: hidden;"
    viewBox="0 0 100 100" preserveAspectRatio="none">
    <rect x="40" y="0" r="40"  width="20" height="95%" style="fill:blue;"/>
    <polygon points="40,95 50,100 60,95" style="fill:blue;" />
</svg>
<svg style="height: 100%; width: 10%; left: 10%; position: absolute; overflow: hidden;">
    <circle cx="50%" cy="16.6%" r="25" style="fill:white;" />
    <circle cx="50%" cy="50%" r="50" style="fill:white;" />
    <circle cx="50%" cy="83.3%" r="25" style="fill:white;" />
</svg>
</body>

Answer 3

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

<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的新手，感谢您的更正。

这并没有直接解决所提出的问题，但我发现我无法保留视图框内不保持宽高比的视图框的宽高比。

对此解决方案的警告是，除非不保留相对位置，否则必须为每个内部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>

如何在允许SVG自身扩展的同时保留SVG内部元素的宽高比？

3 个答案: