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

时间:2014-02-26 15:07:59

标签: javascript html css svg

我正在使用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轴与父标记的差异。

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

由于

2 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:0)

你应该在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/