如何使用SVG繪製線條？

如何使用SVG繪製連接2個圖像的線？比如我要畫一條線連接了$ 1，$ 2（假設$ 1和$ 2圖像）：如何使用SVG繪製線條？

$1 
    $2

，是必要的JavaScript？

謝謝！

來源

2016-09-28 Cabbage

javascript是否需要？取決於這些圖像是如何動態的 –

定義動態請 – Cabbage

不是靜態的，不在設計時間的已知位置 –

您可以輕鬆地draw a line with SVG和你的圖像之間它的位置是：

<img src="http://placehold.it/100x100"> 
 
<svg width="100" height="100" viewPort="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> 
 
    <line x1="0" y1="20" x2="100" y2="80" stroke-width="2" stroke="black" /> 
 
</svg> 
 
<img src="http://placehold.it/100x100">

來源

2016-09-28 06:41:54 andreas

什麼是視口？ – Cabbage

視口是SVG圖像的可見區域。 SVG圖像在邏輯上可以像你想的那樣寬和高，但是一次只能看到圖像的某個部分。可見的區域稱爲視口 – andreas

好吧，謝謝你會試試:) – Cabbage

試試這個：

<svg height="210" width="500"> 
 
    <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> 
 
</svg>

欲瞭解更多SVG標籤信息here
注意，SVG標籤可能無法在IE，Edge和Firefox
正常工作，你也可以使用jsPlumb庫Here

來源

2016-09-28 06:51:19

會試試看，謝謝:)！ – Cabbage

可以得出兩個圖像之間的線像

<img scr="http://www.belutics.com/wp-content/uploads/2016/01/sample-placeholder.png" alt="$1"/> 
<svg height="210" width="500"> 
    <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> 
    Sorry, your browser does not support inline SVG. 
</svg> 
<img scr="http://www.belutics.com/wp-content/uploads/2016/01/sample-placeholder.png" alt="$2"/>

如果你想鏈接圖像？試圖讓它完成CSS相關屬性你可以找到幫助here

來源

2016-09-28 07:01:12

但是不會定位：相對保留一個空格？ – Cabbage

不是你可以添加一個類來覆蓋空間使用CSS定位，如[http://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute –

如何使用SVG繪製線條？

回答

相關問題