Drawing a line over an svg image - html
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://www.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
Related
Is it possible to call another HTML doc, where an SVG is defined, and use it as an SVG in another HTML doc?
I am thinking about the possibilities of working with SVG images and whether it is possible to store an SVG definition in a standalone HTML file e.g. below, blue-circle.html: <html> <body> <title>Saved as blue-circle.html</title> <h1>A bluecircle</h1> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" fill="blue" /> </svg> </body> </html> and call it from another HTML file e.g. <html> <body> <title>My Website</title> <h1>Blah blah blah...</h1> <svg width="100" height="100" url="blue-circle.html")/> </svg> <p>... ...</p> </body> </html> The reasoning behind this is to: Avoid referencing SVG or raster files. Avoid saving SVGs in a raster format and using them via an img tag. Reduce the use of in-line SVG for every HTML doc (thus removing duplication and loads of text in single HTML files). Create a centrally stored vault of SVG's that can be referenced from any HTML file. Is it possible to call another HTML doc, where an SVG is defined, and use it as an SVG in another HTML doc?
you can put your SVGs in a single svg file and reference them via <use> vault.svg <svg xmlns="http://www.w3.org/2000/svg"> <svg id="symbol1" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="50" fill="green"/> </svg> <svg id="symbol2" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="50" fill="blue"/> </svg> <svg id="symbol3" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="50" fill="red"/> </svg> </svg> some.html <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <svg viewBox="0 0 100 100" width="200px"> <use xlink:href="vault.svg#symbol1"/> </svg> <svg viewBox="0 0 100 100" width="200px"> <use xlink:href="vault.svg#symbol2"/> </svg> <svg viewBox="0 0 100 100" width="200px"> <use xlink:href="vault.svg#symbol3"/> </svg> </body> </html> you can not however reference svg living in an external html file that way :-( it only work if the svg live in an extenal svg... there are many way to do get it to work with html using script though...
Why won't this simple SVG line display in Chrome?
This simple SVG will display (a fat line) in FF, but will display nothing in Chrome (tried it on v58.0.3029.110 on Linux). Why is this happening? Is SVG buggy in browsers, in general? I'm trying to create a simple charting library, but if I get such erratic behaviour, I don't know what I should do. <!doctype html> <html> <head> <title>Works on FF, doesn't work on Chrome</title> </head> <body> <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="-1 1.007230, 2 0.000840" preserveAspectRatio="none" style="border: 1px solid blue;"> <line x1="0" x2="0" y1="1.0073" y2="1.008" stroke-width="1" stroke="black" /> </svg> </body> </html> <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="-1 1.007230, 2 0.000840" preserveAspectRatio="none" style="border: 1px solid blue;"> <line x1="0" x2="0" y1="1.0073" y2="1.008" stroke-width="1" stroke="black" /> </svg>
Changing fill to svg with <use>
I'm trying to load in my HTML, the colors that are set in the .svg file with <use> but for some reason it doesn't load.
HTML
<svg>
<use xlink:href="img/beer-05.svg#beer"></use>
</svg>
beer-05.svg
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">
#beer1 {fill:#ffc32e;}
#beer2 {fill:#f2a33a;}
#beer3 {fill:#fffade;}
#beer4 {fill:#ffffff;}
#beer1:hover {fill:green;}
</style>
<symbol id="beer" viewBox="0 0 32 32">
<path id="beer1" d="M19.8,17.5v2.4v2.4v1.4v1v3.8V44h8.5c3,0,5.4-2.4,5.4-5.4V28.5v-3.8v-1v-1.4v-2.4v-2.4H19.8z"/>
<path id="beer2" d="M5.9,15.2v4.8v3.8v1v3.8v10.2c0,3,2.4,5.4,5.4,5.4h8.5V28.5v-3.8v-1v-3.8v-4.8H5.9z" />
<rect x="19.8" y="14.2" fill="none" width="13.9" height="4.8"/>
<path id="beer3" fill="#FFFADE" d="M9.4,38.5L9.4,38.5c-0.6,0-1-0.5-1-1V24c0-0.6,0.5-1,1-1h0c0.6,0,1,0.5,1,1v13.5
C10.4,38.1,9.9,38.5,9.4,38.5z"/>
<path id="beer4" fill="#FFFFFF" d="M35.3,18.5c-0.2,0-0.4,0-0.6,0v-0.2c0-0.4,0-0.8-0.1-1.2c2.1-1.7,3.1-4.2,2.3-6.3c-0.4-1.1-1.2-2-2.3-2.6
c-0.9-2.1-3.2-3.9-6.2-4.6c-1.6-0.4-3.2-0.4-4.5-0.1c-1.3-1-3.2-1.5-5.2-1.4c-2.6,0.2-4.7,1.4-5.7,3c-0.6,0-1.3,0-2,0.1
c-5.2,0.6-9.1,4.3-8.6,8.3c0.2,1.7,1.2,3.2,2.6,4.3c0,0.2,0,0.4,0,0.6v20.3c0,3.5,2.9,6.4,6.4,6.4h17c3.5,0,6.3-2.8,6.4-6.3
c0.2,0,0.4,0,0.6,0c4.5,0,8.2-4.5,8.2-10.1S39.8,18.5,35.3,18.5z M32.7,38.1v0.5c0,2.4-2,4.4-4.4,4.4h-17c-2.4,0-4.4-2-4.4-4.4
V18.8c1.7,0.7,3.6,1,5.7,0.7c1.6-0.2,3.1-0.7,4.4-1.4c1.9,2.2,5.1,3.5,8.8,3.3c2.8-0.2,5.2-1.2,6.9-2.8v0.5V38.1z M35.3,35.2
c-0.2,0-0.4,0-0.6-0.1v-13c0.2,0,0.4-0.1,0.6-0.1c2.5,0,4.7,3,4.7,6.6S37.8,35.2,35.3,35.2z"/>
</symbol>
could someone help me with this?
As defined in the specs, you can't address <use> elements via CSS.
CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree because its contents are not part of the formal document structure.
Check this answer.
In your case, I would embed the external svg with <object> , after altering the external svg file to look like:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="280" viewBox="0 0 32 32" preserveAspectRatio="xMinYMin meet">
<defs>
<style type="text/css">
#beer1 {fill:#ffc32e;}
#beer2 {fill:#f2a33a;}
#beer3 {fill:#fffade;}
#beer4 {fill:#ffffff;}
#beer1:hover {fill:green;}
</style>
</defs>
<path id="beer1" d="M19.8,17.5v2.4v2.4v1.4v1v3.8V44h8.5c3,0,5.4-2.4,5.4-5.4V28.5v-3.8v-1v-1.4v-2.4v-2.4H19.8z"/>
<path id="beer2" fill="#f2a33a" d="M5.9,15.2v4.8v3.8v1v3.8v10.2c0,3,2.4,5.4,5.4,5.4h8.5V28.5v-3.8v-1v-3.8v-4.8H5.9z" />
<rect x="19.8" y="14.2" fill="none" width="13.9" height="4.8"/>
<path id="beer3" fill="#FFFADE" d="M9.4,38.5L9.4,38.5c-0.6,0-1-0.5-1-1V24c0-0.6,0.5-1,1-1h0c0.6,0,1,0.5,1,1v13.5
C10.4,38.1,9.9,38.5,9.4,38.5z"/>
<path id="beer4" fill="#FFFFFF" d="M35.3,18.5c-0.2,0-0.4,0-0.6,0v-0.2c0-0.4,0-0.8-0.1-1.2c2.1-1.7,3.1-4.2,2.3-6.3c-0.4-1.1-1.2-2-2.3-2.6
c-0.9-2.1-3.2-3.9-6.2-4.6c-1.6-0.4-3.2-0.4-4.5-0.1c-1.3-1-3.2-1.5-5.2-1.4c-2.6,0.2-4.7,1.4-5.7,3c-0.6,0-1.3,0-2,0.1
c-5.2,0.6-9.1,4.3-8.6,8.3c0.2,1.7,1.2,3.2,2.6,4.3c0,0.2,0,0.4,0,0.6v20.3c0,3.5,2.9,6.4,6.4,6.4h17c3.5,0,6.3-2.8,6.4-6.3
c0.2,0,0.4,0,0.6,0c4.5,0,8.2-4.5,8.2-10.1S39.8,18.5,35.3,18.5z M32.7,38.1v0.5c0,2.4-2,4.4-4.4,4.4h-17c-2.4,0-4.4-2-4.4-4.4
V18.8c1.7,0.7,3.6,1,5.7,0.7c1.6-0.2,3.1-0.7,4.4-1.4c1.9,2.2,5.1,3.5,8.8,3.3c2.8-0.2,5.2-1.2,6.9-2.8v0.5V38.1z M35.3,35.2
c-0.2,0-0.4,0-0.6-0.1v-13c0.2,0,0.4-0.1,0.6-0.1c2.5,0,4.7,3,4.7,6.6S37.8,35.2,35.3,35.2z"/>
</svg>
Edit from the comments below :
You can access each item separately, the same way <use xlink:href> does :
<object type="image/svg+xml" data="http://epoje.es/beers.svg#cervey"></object>
Color SVG from external CSS
I have a simple SVG made in Illustrator, and each part of it I'd like to have a different color. The SVG currently looks like this.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" id="Ellipse_2_xA0_Image_1_"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000"
xml:space="preserve">
<circle cx="500" cy="500" r="13"/>
<circle fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" cx="500" cy="500" r="20"/>
<circle cx="911" cy="500.5" r="7"/>
<circle cx="91" cy="500.5" r="7"/>
<line fill="none" class="svgColor" stroke="#000000" stroke-width="4" stroke-miterlimit="10" x1="218.2" y1="501.5" x2="501" y2="218.7"/>
<line fill="none" class="svgColor" stroke="#000000" stroke-width="4" stroke-miterlimit="10" x1="781.8" y1="501.5" x2="499" y2="218.7"/>
<line fill="none" class="svgColor" stroke="#000000" stroke-width="4" stroke-miterlimit="10" x1="781.8" y1="499.5" x2="499" y2="782.3"/>
<line fill="none" class="svgColor" stroke="#000000" stroke-width="4" stroke-miterlimit="10" x1="501" y1="782.3" x2="218.2" y2="499.5"/>
</svg>
The class currently sits in a style sheet requested before the SVG. I've tried adding classes to the SVG, line, and circle tags to try and change the colors with either fill or stroke and it remains black. I've tried removing the stroke parameter as well (even though others said to keep it), yet it'll just remove it completely than allowing the CSS to take over. What am I doing wrong?
CSS:
.svgColor {
stroke: #a90000;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link href="/css/loading.css" rel="stylesheet"/>
</head>
<body>
<img src="/svg/loadingSymbol.svg" alt="Loading Symbol">
</body>
If you are using an external css file you have to link it from your csv. Your svg is not inlined in the html, so the html css is not appliet to it. Before the svg tag: <?xml-stylesheet type="text/css" href="/css/loading.css" ?> shoud work. If it doesn't try to insert the svg with <object>.
Since the strokes are defined directly on the elements, you'll need to use !important in your css to override them.
.svgColor {
stroke: #a90000 !important;
}
Does element order matter for inline SVG?
In Google Chrome 24, if an element referenced by a <use> element is defined later in the document it isn't rendered. I didn't notice anything related to element order in the documentation for the use element. Is this behavior undefined and shouldn't be expected to be consistent across browsers or just a bug in Chrome? An example of this can be seen below (slightly modified from this question). Blue circle renders as expected, red, not so much. Firefox 17 and IE 9 render both circles as I would expect. When the same content is referenced as an external <img />, both circles render as well. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Chrome use-tag bug?</title> </head> <body> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200"> <defs> <g id="test2"> <circle cx="50" cy="50" r="25" fill="blue"/> </g> </defs> <g> <rect x="0.5" y="0.5" width="199" height="199" stroke="black" fill="none"/> <use xlink:href="#test1" x="0" y="0"/> <use xlink:href="#test2" x="0" y="0"/> </g> <defs> <g id="test1"> <circle cx="100" cy="100" r="25" fill="red"/> </g> </defs> </svg> </body> </html> UPDATE: Seems to be working in Chrome 39.
The Rendering Order depends on the element order, so it looks strong like a bug in chrome: SVG Rendering Order 1.0, Part 2: Language