my svg is just text over a circke with full screen rectangle
svg
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red"/>
<circle cx="150" cy="100" r="80" fill="green"/>
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">Hello SVG</text>
</svg>
When in img src it is arbitriraly truncated at the bottom why ? How to fix this ?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<img src="hello.svg" type="image/svg+xml">
</body>
</html>
Specify the width, height and viewPort attributes of svg.
<svg version="1.1" width="300" height="200" viewPort="0 0 300 200" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">Hello SVG</text>
</svg>
You have not specified any size for the <img> or <svg> so the browser is choosing the default size for indeterminate sized objects, which is 300x150. So your circle will get cut off at the bottom. The solution, as chipChocolate has already pointed out, is to give one or the other an appropriate size.
I've got a four slice scaling SVG image which works great in all browsers, except when I try and include it via a use tag. Then it works fine in Chrome, Firefox and Safari but not in <=IE11.
The problem seems to be with the clip-path, is there something I'm missing to get this working in IE or is it just not supported? If not, is there a way I can achieve the same effect in an IE friendly way?
Thanks!
#box,
#use {
width: 200px;
height: 50px;
}
#use {
fill: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="display: none;">
<svg id="box" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="topleft" viewBox="0 0 500 500">
<path d="M3.1,22.6c0,0.2,0,0.4,0,477.4H5C5,22.9,5,22.5,5,22.6c0-4.3,0-7.9,0.1-8.8C5.1,11.5,5,8.2,6.2,6.1
c0.4-0.6,40.8-0.8,80.2-0.9c0.5,0,413.6,0,413.6,0V3.4c0,0-413.3,0-413.6,0C47.5,3.4,8.2,3.6,6.7,4C6.5,3,6.6,2,6.5,1
C6.4,0.3,5.7-0.1,5,0c-0.7,0.1-1,0.8-1,1.4C4.2,2.2,4.2,3,4.2,3.7C3.4,3.9,2.7,4.2,1.9,4.4c-1.5,0.3-1,2.7,0.5,2.4
C2.9,6.6,3.5,6.4,4,6.3C3.5,7.8,3.5,9.7,3.4,11C3.3,12,3.1,19.8,3.1,22.6z"/>
</symbol>
<symbol id="topright" viewBox="0 0 500 500">
<use xlink:href="#topleft"/>
</symbol>
<symbol id="bottomleft" viewBox="0 0 500 500">
<path d="M5.3,494.5C5,493.1,5,484.3,5,477.4L5,0H3.1l0,477.4c-0.1,7.2,0,15.3,0.4,17.2c-0.8,0.1-1.7,0.1-2.5,0.3
c-0.6,0.2-1.1,0.7-1,1.4c0.1,0.6,0.8,1.1,1.4,1c0.6-0.2,1.3-0.2,1.9-0.2c0,0.2-0.2,1.5-0.3,1.7C3,499.4,3.7,500,4.3,500
c0.7,0,1.2-0.5,1.3-1.1c0-0.1,0.3-2.3,0.3-2.3c1.8,0.4,4.2,0.3,5.3,0.4c0.9,0.1,37.6,0.2,75.2,0.3c0.3,0,413.6,0,413.6,0v-2.1
c0,0-413.3,0-413.6,0C46.8,495.2,6,495,5.3,494.5z"/>
</symbol>
<symbol id="bottomright" viewBox="0 0 500 500">
<use xlink:href="#bottomleft"/>
</symbol>
<clipPath id="crop">
<rect class="mask" width="100%" height="100%" x="0"/>
</clipPath>
</defs>
<svg width="50%" height="50%">
<use xlink:href="#topleft" width="500" height="500" class="box_border__tl"/>
</svg>
<!-- top right: -->
<g transform="scale(-1, 1)">
<svg width="50%" height="50%" x="-100%" y="0">
<use xlink:href="#topright" width="500" height="500" class="box_border__tr"/>
</svg>
</g>
<!-- bottom left: -->
<g transform="scale(1, -1)">
<svg width="50%" height="50%" x="0" y="-100%" clip-path="url(#crop)">
<use xlink:href="#bottomleft" width="500" height="500" y="-500" transform="scale(1, -1)" class="box_border__bl"/>
</svg>
</g>
<!-- bottom right: clip-path="url(#crop)" -->
<g transform="scale(-1, -1)">
<svg width="50%" height="50%" x="-100%" y="-100%" clip-path="url(#crop)">
<use xlink:href="#bottomright" width="500" height="500" y="-500" transform="scale(1, -1)" class="box_border__br"/>
</svg>
</g>
</svg>
</div>
<svg id="use" class="box" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="#box"/>
</svg>
The issue is happening because I'm hiding the main SVG in a container with display: none; The same also happens if I use visibility: hidden; or position: absolute; on the parent container.
It only works if the main SVG is rendered on the page. It also works if you start with the main item visible, then hide it using javascript.
It's a really obscure issue, and odd how the non-clipped elements render even when the SVG is hidden. Oh, also the main SVG must be placed above the use links otherwise Safari doesn't render it.
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
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