Wie kann ich eine Linie zeichnen, die 2 Bilder mit SVG verbindet ?. Zum Beispiel möchte ich eine Linie zeichnen $ 1 und $ 2 (unter der Annahme, $ 1 und $ 2 sind Bilder) zu verbinden:Wie kann ich eine Linie mit SVG zeichnen?
$1
$2
Und ist Javascript erforderlich?
Danke!
Sie können leicht draw a line with SVG und positionieren Sie es zwischen Ihren Bildern:
<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">Was ist Viewport? – Cabbage
Das Ansichtsfenster ist der sichtbare Bereich des SVG-Bildes. Ein SVG-Bild kann logisch so breit und hoch sein, wie Sie möchten, aber nur ein bestimmter Teil des Bildes kann gleichzeitig sichtbar sein. Der Bereich, der sichtbar ist, heißt das Ansichtsfenster – andreas
Ah ok danke wird es versuchen :) – Cabbage
Try this:
<svg height="210" width="500">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>Weitere SVG Taginfo here
Beachten Sie, dass SVG-Tag nicht richtig auf IE arbeiten kann Edge und Firefox
Sie können auch jsPlumb Bibliothek verwenden Here
Wird es versuchen, danke :)! – Cabbage
Sie eine Linie zwischen den beiden Bildern wie
<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"/>
und wenn Sie Zeile mit Bildern verknüpfen möchten? versuchen, es mit CSS relativ Eigenschaft getan Sie here helfen können
Aber nicht Position: relative verlassen eine Leerstelle? – Cabbage
Sie können keine Klasse hinzufügen, um den Speicherplatz zu überschreiben, indem Sie eine CSS-Positionierung wie [http://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute] verwenden –
ist Javascript erforderlich? hängt davon ab, wie dynamisch diese Bilder sind –
dynamisch definieren bitte – Cabbage
nicht statisch, nicht an einem bekannten Ort zur Entwurfszeit –