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

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

html svg

Html 如何保持SVG内部元素的纵横比，同时允许SVG本身进行缩放？,html,svg,Html,Svg,我对SVG非常陌生，如果这是一个明显的问题，我很抱歉。我修修补补了几个小时，似乎遇到了麻烦我试图在HTML文档中创建一个SVG元素，它：在外部视口上具有固定边界保留内部图元的纵横比不保留外部SVG元素的纵横比可以在维护这些约束的同时任意调整大小这个JSFIDLE说明了我的意思和我的尝试：这是相同的代码，因为我无法发布此代码： <div> <h2>correct placement and aspect ratio, but cannot be

我对SVG非常陌生，如果这是一个明显的问题，我很抱歉。我修修补补了几个小时，似乎遇到了麻烦

我试图在HTML文档中创建一个SVG元素，它：

在外部视口上具有固定边界
保留内部图元的纵横比
不保留外部SVG元素的纵横比
可以在维护这些约束的同时任意调整大小

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

这是相同的代码，因为我无法发布此代码：

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


正确的放置和纵横比，但不能在不丢失相对放置的情况下调整大小
圆的纵横比正确，相对位置不正确
正确的相对位置，可以调整大小，但会丢失内部纵横比

这可能吗？我这样做是错误的吗？

使用纯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>

当宽度加倍时

非常感谢。我也有类似的问题。这是我的解决方案

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

对不起，我也是SVG的新手，谢谢你的更正

这并不能直接解决出现的问题，但我发现我无法在不保留纵横比的视口中保留视口的纵横比

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

可以使用2个svg，一个带有preserveAspectRatio=“none”，另一个没有。最后一个是上一个

在我的例子中，我画了一个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>

你能解释一下吗？我看不出这是如何回答老年退休金问题的。此外，此处的

视图框

无效。不能在

视图框中使用百分比值。