SVG標記的子元素具有父級以外的默認佈局

我在學習如何使用HTML5 svg標記。當我在Chrome和Firefox中打開此項時SVG標記的子元素具有父級以外的默認佈局

<!DOCTYPE html> 
<html> 
    <head></head> 
    <body> 
     <svg width="200" height="200"> 
      <text>Hello World</text> 
     </svg> 
    </body> 
</html>

什麼都不顯示。點擊「檢查元素」後，我看到文本元素在svg元素之外有一個默認的位置。我怎樣才能改變svg元素，使其所有的後代元素都從它們各自的父元素中的點（0,0）開始？

來源

2015-07-19 AjaxLeung

你需要尋找到'viewbox' - http://tutorials.jenkov.com/svg/svg-coordinate-system.html –

如果這是真的，爲什麼不恰好有四分之一的「Hello World」出現？文本元素的工作方式有點不同嗎？ – AjaxLeung

http://tutorials.jenkov.com/svg/text-element.html#text-example –

您是否嘗試過在SVG元素上設置xmlns屬性爲http://www.w3.org/2000/svg？

如果您忽略該屬性，瀏覽器可能無法將內容檢測爲SVG。基本上，xmlns屬性定義元素的XML名稱空間。

來源

2015-07-19 21:53:32

SVG元素不會像HTML一樣自動佈局。所有SVG圖形元素都必須使用座標進行專門定位。

<text>元素需要指定其起始位置（x和y）。如果不指定它們，則默認爲0，對應於SVG的左上角。

所以要解決這個問題，給你的文本元素的開始座標。

<html> 
 
    <head></head> 
 
    <body> 
 
     <svg width="200" height="200"> 
 
      <text x="10" y="50">Hello World</text> 
 
     </svg> 
 
    </body> 
 
</html>

來源

2015-07-20 00:49:41

SVG標記的子元素具有父級以外的默認佈局

回答

相關問題