SVG - 在响应线条中拉伸的圆圈

Question

我用SVG制作了一个响应式动画网格，但我不知道为什么我的圆圈被拉伸了。当我以某种比例调整窗口大小时，圆圈看起来不错。

在那里你可以看到 - JSFiddle

这是我的SVG代码

<svg height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none">

            <path id="firstLine" d="M 0 100 L 50 0, M 50 0 L 100 100 ,M 100 100 L 0 50 ,M 0 50 L 100 0,M 100 0 L 0 100" class="first-line" style="" stroke="white" stroke-width="1" fill="none" vector-effect="non-scaling-stroke" />

            <path id="secondLine" d="M 100 100 L 0 0,    M 0 0 L 100 50,    M 100 50 L 0 100, M 0 100 L 25 0,    M 25 0 L 50 100,   M 50 100 L 75 0,   M 75 0 L 100 100" class="second-line" style="" stroke="white" stroke-width="1" fill="none" vector-effect="non-scaling-stroke" />

            <path id="thirdLine" d="M 50 100 L 0 0,   M 0 0 L 25 100,   M 25 100 L 50 0,   M 50 0 L 75 100,   M 75 100 L 100 0,   M 100 0 L 50 100" class="third-line" style="" stroke="white" stroke-width="1" fill="none" vector-effect="non-scaling-stroke" />

            <circle cx="" cy="" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke">
                <animateMotion dur="60s" repeatCount="indefinite">
                    <mpath xlink:href="#firstLine"/>
                </animateMotion>
            </circle>

            <circle cx="" cy="" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke">
                <animateMotion dur="60s" repeatCount="indefinite">
                    <mpath xlink:href="#secondLine"/>
                </animateMotion>
            </circle>

            <circle cx="" cy="" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke">
                <animateMotion dur="60s" repeatCount="indefinite">
                    <mpath xlink:href="#thirdLine"/>
                </animateMotion>
            </circle>

            <circle cx="35" cy="20" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke">
            </circle>


        </svg>

Answer 1

也许你现在不需要它，但是我可以给观察盒提供所需的比例：即：0 0 100 100对于平方比0 0 25 100对于垂直比率0 0 100 25对于水平比率。

然后给svg标签宽度和高度100％并将svg标签放在div中，这样我可以在用户调整窗口大小时保持圆形，线条和其他绘制的比例而不拉伸。