Рисование линии над изображением SVG - PullRequest
Новая
       20

Рисование линии над изображением SVG

4 голосов
/ 07 июля 2011

как бы я нарисовал линию, чтобы перейти под изображение 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, для сафари расширение файла должно быть .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>

Ответы [ 3 ]

2 голосов
/ 07 июля 2011

Тогда, вероятно, вы хотите включить изображение внутри <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>
2 голосов
/ 07 июля 2011

Вы пытались разместить <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>
0 голосов
/ 19 апреля 2012

чтобы у вас была строка сверху изображения, она должна быть после нее в домике.SVG рендерит фигуры и изображения в том порядке, в котором он находится в DOM.Обратите внимание, что в спецификациях SVG нет атрибута z-index, поэтому вы просто не можете его использовать.Все, что вы можете сделать, это поместить строку после изображения в DOM.

Еще одно замечание: вы можете манипулировать SVG через Javascript, поэтому вы можете управлять DOM, используя обычные функции JavaScript

...