Drawing a line over an svg image_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-17 16:02 出处：网络

how would I draw the line to go over instead of under the svg image? <html> <head> <svg xmlns=\"http://www.w3.org/2000/svg\"

相关专题：css draw svg

how would I draw the line to go over instead of under the svg image?

<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://w开发者_JAVA百科ww.adobe.com/svg/viewer/install/" />
</html>

You can run the code here: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_div_test

Edit: Code that works (at least on firefox, for safari the file extension has to be .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>

Then probably you want to include the image inside <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>

Did you try to place <svg> after the image like this:

<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>

for you to have the line on top of the image, it has to be after it in the dom. SVG renders shapes and images in the order that it finds in the dom. Note that there is no z-index attribute in the SVG specifications, so you just can't use that. All you can do is place the line after the image in the dom.

Another note: you can manipulate SVG through Javascript, so you can manipulate the dom using normal javascript functions