在svg圖片上繪製一條線

我該如何畫線而不是在svg圖片下方？在svg圖片上繪製一條線

<html> 
<head> 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <line x1="50" y1="0" x2="50" y2="1000" style="stroke:#006600; stroke-width:20"/> 
</svg> 
<img src="http://upload.wikimedia.org/wikipedia/commons/5/57/Weakness_of_Turing_test_1.svg" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" /> 
</html>

您可以運行此代碼：http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_div_test

編輯：那工作守則（至少在Firefox，Safari的文件擴展名必須是.xhtml） -

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="7in" height="4in" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <image width="600px" height="400px" xlink:href="http://upload.wikimedia.org/wikipedia/commons/5/57/Weakness_of_Turing_test_1.svg"> </image> 
    <line x1="50" y1="0" x2="500" y2="1000" style="stroke:#006600; stroke-width:15"/> 
</svg>

來源

2011-07-06 Alede

那麼可能你想要包括裏面<svg>圖像：

<html> 
<head> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <image xlink:href="http://upload.wikimedia.org/wikipedia/commons/5/57/Weakness_of_Turing_test_1.svg" width="1000" height="1000" /> 
    <line x1="50" y1="0" x2="50" y2="1000" style="stroke:#006600; stroke-width:20"/> 
</svg> 
</html>

來源

2011-07-07 00:25:08

得到它通過修改版本的工作（！我更新了與代碼的問題）...它在Firefox上工作正常，但在Safari瀏覽器上失敗（只是一個有邊界的空白框出現）..任何想法，爲什麼？謝謝!! – Alede

種先生：顯然在Safari瀏覽器，XML-HTML相關文件必須明確地重命名爲一個.xhtml擴展才能工作..代碼的最後工作片更新在我的問題..非常感謝！ – Alede

難道您嘗試將<svg>放置在像這樣的圖像之後：

<html> 
<head> 
<img src="http://upload.wikimedia.org/wikipedia/commons/5/57/Weakness_of_Turing_test_1.svg" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" /> 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <line x1="50" y1="0" x2="50" y2="1000" style="stroke:#006600; stroke-width:20"/> 
</svg> 
</html>

來源

2011-07-06 23:58:08

是，圖像仍覆蓋線操作DOM ..;（ – Alede

讓你對圖像的頂部行，它必須是經過在DOM。 SVG按照在dom中找到的順序呈現形狀和圖像。請注意，SVG規範中沒有z-index屬性，所以你不能使用它。你所能做的就是把圖像放在dom後面。

另注：您可以通過JavaScript操縱SVG，這樣你就可以使用正常的JavaScript函數

來源

2012-04-19 19:32:55 zeacuss

在svg圖片上繪製一條線

回答

相關問題