SVG文本的x和y值，以百分比表示+；像素

我需要虚拟地将svg元素划分为9个相等的网格，用于文本定位，比如x=0，y=10；x=33.33%，y=10；x=0，y=33.33%+10，依此类推。

---

css中的最后一个可以使用calc（33.33%+10）完成，但是如何为svg文本的x和y设置它。是否有一种方法可以将百分比添加到像素并将svg文本的x和y分配给它，或者是否有另一种更好的方法可以继续。请指导。

您需要有一个可以使用百分比值的地方，还有一个可以使用像素值的地方。对于文本元素来说，这是相对容易的。使用x/y百分比值定位文本，然后使用变换属性移动文本，该属性接受在局部坐标系中解释的无单位数：

<svg>
    <text x="33.3%" y="0%" transform="translate(0, 10)"></text>
    <text x="0" y="33.3%%" transform="translate(5, 15)"></text>
<svg>

如果文本相对于网格始终位于同一位置，则可以简化：

<svg>
    <g transform="translate(0, 10)">
        <text x="33.3%" y="0%"></text>
        <text x="0" y="33.3%%"></text>
    </g>
<svg>

在更一般的情况下，最好和最具语义的策略可能是嵌套

元素，其中内部元素表示网格中的单个单元格：

<svg>
    <!-- width and height are not strictly needed for the nested
         svg elements, they default to 100% -->
    <svg x="33.3%" y="0%" width="33.3%" height="33.3%">
         <text x="0" y="10"></text>
         <circle cx="50" cy="20" r="20" />
    </svg>
    <svg x="0%" y="33.3%" width="33.3%" height="33.3%">
         <text x="0" y="10"></text>
         <rect x="0" cy="0" width="100" height="50" />
    </svg>
</svg>

---

viewBox的值不能为100%，它们始终引用绝对用户空间坐标。在这里，它被故意省略，以使响应行为成为可能。-省略宽度和高度只是为了应用于内部svg元素，对于外部svg元素，您是对的。