Question

我需要将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值，或者有其他更好的方法继续进行。请指导。

Answer 1

您需要一个可以使用百分比值的地方，另一个可以使用像素值的地方。对于文本元素，这是相对容易的。使用百分比x / y值定位文本，然后使用transform属性移动文本，该属性采用在本地坐标系中解释的无单位数字：

<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>元素，其中内部元素表示网格中的单个单元格：

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

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

1 个答案: