Question

我正在使用svg图片，我想出了一个问题，即dy标记的text属性被忽略了。这是一个例子

<body>
    <svg width="100" height="100" style="border-style:solid;border-width:3px;border-color:grey;">
        <g transform="translate(20,20)scale(1)">
            <g class="node" transform="translate(0,0)">
                <rect height="27" width="56" rx="10" ry="10" style="fill: #ffffff;stroke:steelblue;stroke-width:2px"></rect>
                <text dx="6" dy="6">
                    <tspan x="0" dy="15">lxvirt129</tspan>
                </text>
            </g>
        </g>
    </svg>
</body>

这是它的小提琴liveExample

所以我的问题是为什么当我更改dy标记中<text>的值时，文字不会改变位置？据我所知，dy属性表示 y轴与父标记的差异。

那么为什么在这种情况下不起作用？

由于

Answer 1

你的标记就是这个......

<text dx="6" dy="16">
    <tspan x="0" dy="15">lxvirt129</tspan>
</text>

<text>上的dy属性适用于第一个字符，但<tspan>上的dy属性也适用。 <tspan>属性获胜，因为子属性设置会覆盖父项。

Answer 2

你应该在tspan标签中使用 y =“15”，而不是dy =“15”。它会工作的。：）

<body>
    <svg width="100" height="100" style="border-style:solid;border-width:3px;border-color:grey;">
        <g transform="translate(20,20)scale(1)">
            <g class="node" transform="translate(0,0)">
                <rect height="27" width="56" rx="10" ry="10" style="fill: #ffffff;stroke:steelblue;stroke-width:2px"></rect>
                <text dx="6" dy="6">
                    <tspan x="0" y="15">lxvirt129</tspan>
                </text>
            </g>
        </g>
    </svg>
</body>

工作JsFiddle：http://jsfiddle.net/6m3sX/

为什么svg文本标签忽略了dy属性？

2 个答案: