html - SVG 中的点与什么有关？

Question

我有以下简单的 SVG:

<div class="svg-wrapper">


            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" class="circliful">
                <g stroke="#ccc">
                    <line x1="133" y1="50" x2="140" y2="40" stroke-width="2" />
                </g>
                <g stroke="#ccc">
                    <line x1="140" y1="40" x2="200" y2="40" stroke-width="2" />
                </g>
                <circle cx="100" cy="100" r="57" class="border" fill="#eee" stroke="none" stroke-width="15" stroke-dasharray="360" transform="rotate(-90,100,100)" />
                <circle class="circle" cx="100" cy="100" r="57" class="border" fill="none" stroke="#3498DB" stroke-width="5" stroke-dasharray="0,20000" transform="rotate(-90,100,100)" />
                <text text-anchor="middle" x="100" y="110" class="icon" style="font-size: 40px" fill="#3498DB">&#xf206</text>
                <text class="timer" text-anchor="middle" x="175" y="35" style="font-size: 22px; undefined;" fill="#aaa">0%</text>


        </div>

现在如果你仔细观察 SVG，你会看到有如下属性:

x1="133" y1="50" x2="140" y2="40"

以及圆圈的以下内容:

 cx="100" cy="100" r="57" , 

我对此只有一个问题，这些要点是否与文档有关？现在我尝试了以下操作:

.svg-wrapper  {
            position: relative;
            top: 200px;
            left: 200px;
            max-width: 200px;
        }

即通过使用 position:relative 稍微移动了容器，圆圈也移动了，现在我相信如果那些相对于文档的点圆圈不应该移动，但它显然移动了，所以它表示以下几点与文档无关:

cx="100" cy="100" r="57"

和

x1="133" y1="50" x2="140" y2="40"

如果不是文档，那么这些点与什么有关？有人可以解释吗？

Answer 1

坐标值相对于 SVG 的原点，即 SVG 视口(viewport)的左上角。

viewPort 由 <svg> 定义元素的宽度和高度属性。如果通过移动 SVG 所在的容器来移动 SVG，则移动了 SVG。就像它是 <img> 一样, <canvas>等