爲什麼svg文本標籤忽略了dy屬性？

我正在研究svg圖片，我想出了一個問題，其中text標記的dy屬性被忽略。下面是一個例子爲什麼svg文本標籤忽略了dy屬性？

<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

所以我的問題是，爲什麼當我在<text>標籤改變dy價值的文本不會改變位置？根據我的理解，dy屬性表示y軸與父標籤的區別。

那麼爲什麼在這種情況下不工作？

感謝

來源

2014-02-26 NikosDim

所以...你怎麼改變'dy' ?.我沒有看到任何JS –

@Paulie_D在我的示例中，我手動更改'dy'以保持簡單。在我的代碼中，這是從JS開始的。 – NikosDim

您應該使用Y = 「15」在TSPAN標籤，而不是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/

來源

2014-02-26 15:15:53 sanchit

您的標記是這樣的......

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

在<text> Dy的屬性適用於第一個字符但這樣做對的DY屬性<tspan>。 <tspan>屬性由於子屬性設置會覆蓋父項而獲勝。

來源

2014-02-26 15:30:13

根據你所說的'text'標籤的'dy'屬性應該被忽略，但在我的例子中不是。如果你改變了'dy'，那麼文本的位置就會改變。但是，如果你改變了'dy'，它不會讓我困惑。在我的程序中，我的文本中有多個'tspan'標記，但我在我的問題中發佈了一個簡化的示例。 – NikosDim

我認爲你需要重寫你的評論，因爲它目前沒有意義。 –

你是對的。這裏是更正的一個：「根據你所說的'text'標記的'dx'屬性應該被忽略，但在我的例子中不是。如果你改變'dx'文本的位置改變。但是如果你改變'dy'它不會讓我困惑。「希望現在更好:) – NikosDim

爲什麼svg文本標籤忽略了dy屬性？

回答

相關問題