SVG strange behavior in IE10+ - debugging

I'm using svg patterns to define custom background images for the fill attribute in svg's later in the page. I'm hiding the original svg and pattern definitions at the top of the page.
IE9 has no issues
IE10 doesn't show anything
IE11 working in fiddle, but in production only shows last one on page
Here is a stripped down example: http://jsfiddle.net/CCFWj/3/
<div style="height:0px; overflow:hidden">
<svg version="1.1" x="0px" y="0px" width="0" height="0" viewBox="0 0 140 155">
<defs>
<pattern id="oil-gas" patternUnits="userSpaceOnUse" width="186" height="206">
<image xlink:href="http://megastaging.com/erc/wp-content/uploads/2013/12/Oil_1-500x554-1390485365.jpg" x="0" y="0" width="186" height="206"></image>
</pattern>
<pattern id="marine" patternUnits="userSpaceOnUse" width="186" height="206">
<image xlink:href="http://megastaging.com/erc/wp-content/uploads/2014/01/Marine_Header-500x554-1390486195.jpg" x="0" y="0" width="186" height="206"></image>
</pattern>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="140px" height="154.046px" viewBox="0 0 140 154.046" enable-background="new 0 0 140 154.046" xml:space="preserve">
<path id="hex-140-155" d="M78.113,152.144c-4.431,2.531-11.684,2.537-16.118,0.016l-53.869-30.63c-4.434-2.522-8.067-8.718-8.071-13.769
L0,46.407c-0.004-5.051,3.617-11.252,8.047-13.782l53.81-30.724c4.43-2.529,11.684-2.536,16.118-0.014l53.867,30.628
c4.435,2.522,8.153,9.322,8.158,14.374l-0.031,60.748c0.005,5.051-3.615,11.253-8.046,13.783L78.113,152.144z"> </path>
</svg>
</div>
<svg class="image" viewBox="0 0 140 155" width="140px" height="155px">
<use xlink:href="#hex-140-155" fill="url(#oil-gas)"></use>
</svg>
<svg class="image" viewBox="0 0 140 155" width="140px" height="155px">
<use xlink:href="#hex-140-155" fill="url(#marine)"></use>
</svg>


The Microsoft SVG deviations are vague on the subject of the pattern element:
The display property affects pattern elements and references to those pattern elements
On the subject of xml:space:
The xml:space attribute is not supported in SVG.
So xml:space and pattern deviations may cause no side-effects in one version of IE, but several side-effects in another.
References
MS-SVG:2.1.16 [SVG11] Section 13.3, Patterns
MS-SVG:2.1.1 [SVG11] Section 5.10.2, The xml:lang and xml:space attributes

Related

How to produce a hash (#) in a data URI in Firefox?

I have an SVG that includes a hash (#). Now, I want to use the SVG in an img data URI. However, Firefox will not show the image.
Here is a minimal example. The first img works fine while the second does not.
<img src='data:image/svg+xml;utf8,
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" height="100px" width="100px">
<text x="50" y="50">X</text>
</svg>' alt="" />
<img src='data:image/svg+xml;utf8,
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" height="100px" width="100px">
<text x="50" y="50">#</text>
</svg>' alt="" />
https://codepen.io/anon/pen/GdwmKZ
Works fine in Chrome and Edge.

SVG path : pattern fill not working in firefox and Safari

SVG path element not working in Firefox and Safari but it works in Chrome.
Why doesn't the path filled using pattern in Firefox and Safari?
<svg id="" xmlns="http://www.w3.org/2000/svg" height="500" width="600" style="position: absolute;">
<defs>
<pattern id="imgpattern" x="0" y="0" width="1" height="1" patternUnits="userSpaceOnUse">
<image width="600" xlink:href="https://i.pinimg.com/564x/e1/a5/b7/e1a5b7edacee456a4f3bc3e00c3c01d9.jpg"></image>
</pattern>
</defs>
<path d="M50,100 C50,100 100,100 100,50 L100,50 500,50 C500,50 500,100 550,100 L550,100 550,400 C550,400 500,400 500,450 L500,450 100,450 C100,450 100,400 50,400 L50,400 50,100 L50,100 0,100 0,0 0,425 L0,425 50,425 C50,425 75,425 75,450 L50,450 50,425 0,425 0,500 525,500 525,450 C525,450 525,425 550,425 L550,425 550,450 525,450 525,500 600,500 600,75 550,75 C550,75 525,75 525,50 L525,50 550,50 550,75 600,75 600,0 75,0 75,50 C75,50 75,75 50,75 L50,50 75,50 75,0 0,0 0,100" fill="#ff0000;" stroke="#F000" stroke-width="1px" style="fill:url(#imgpattern)"></path>
</svg>

There is no height attribute on the image. SVG 2 allows width/height to be omitted but only Blink has implemented this part of SVG 2 so far.
You also have a redundant fill on the rect (as you're applying a pattern fill as a style)
<svg id="" xmlns="http://www.w3.org/2000/svg" height="500" width="600" style="position: absolute;">
<defs>
<pattern id="imgpattern" x="0" y="0" width="1" height="1" patternUnits="userspaceOnUse">
<image width="600" height="600" xlink:href="https://i.pinimg.com/564x/e1/a5/b7/e1a5b7edacee456a4f3bc3e00c3c01d9.jpg"></image>
</pattern>
</defs>
<path d="M50,100 C50,100 100,100 100,50 L100,50 500,50 C500,50 500,100 550,100 L550,100 550,400 C550,400 500,400 500,450 L500,450 100,450 C100,450 100,400 50,400 L50,400 50,100 L50,100 0,100 0,0 0,425 L0,425 50,425 C50,425 75,425 75,450 L50,450 50,425 0,425 0,500 525,500 525,450 C525,450 525,425 550,425 L550,425 550,450 525,450 525,500 600,500 600,75 550,75 C550,75 525,75 525,50 L525,50 550,50 550,75 600,75 600,0 75,0 75,50 C75,50 75,75 50,75 L50,50 75,50 75,0 0,0 0,100" stroke="#F000" stroke-width="1px" style="fill:url(#imgpattern)"></path>
</svg>

Animate path loaded from external svg

When I define a simple path with an animation in a svg and use it immediately, everything works fine (see the following snippet)
<html>
<body>
<svg width='100%' height='100%' preserveAspectRatio="xMaxYMax">
<defs>
<symbol id="myloader" width="100%" height="100%" x="0px" y="0px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 80">
<path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
<animateTransform attributeName="transform" attributeType="xml" dur="0.6s" from="0 25 25" repeatCount="indefinite" to="360 25 25" type="rotate"/>
</path>
</symbol>
</defs>
<use xlink:href="#myloader"></use>
</svg>
</body>
</html>
Now when I try to move this svg to an external file and load it from there, the svg is shown but the animation doesn't run.
loaders.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:xl="http://www.w3.org/1999/xlink" width="100%" height="100%" x="0px" y="0px" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 50 50;" version="1.1" viewBox="0 0 50 80">
<defs>
<symbol id="myloader" width="100%" height="100%" x="0px" y="0px" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 50 50;" viewBox="0 0 50 80">
<path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
<animateTransform attributeName="transform" attributeType="xml" dur="0.6s" from="0 25 25" repeatCount="indefinite" to="360 25 25" type="rotate"/>
</path>
</symbol>
</defs>
</svg>
html
<html>
<body>
<svg width='100%' height='100%' preserveAspectRatio="xMaxYMax">
<use xlink:href="loaders.svg#myloader"></use>
</svg>
</body>
</html>
Is this expected behaviour or am I doing something wrong. I want the animation to run from the external resource too.

d3 Select and modify g elements within svg elements

I'm having trouble selecting and manipulating (i want to add click behavior to) a path in inline svg code I produced in Inkscape and then pasted into my html file.
<svg version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="905.1372px" height="1100px" viewBox="0 300 721.464 889.561" enable-background="new 0 0 721.464 889.561"
xml:space="preserve">
<g id="section3">
<path id="section"
d="m 433.125,729.14792 -0.17857,32.67857 32.32143,0.44643 15.89286,-0.44643 11.78571,-3.03572 -11.33928,-35.26785 -19.82143,5.625 z"/>
</g>
I've tried all sorts of way.. getelementbyid, d3.select("#id").. can anyone help?

Selecting by ID:
d3.select("#section3")
Check this demo, clicking on your path (you'll have to scroll down to find it):
d3.select("#section3").on("click", function(){
console.log("hello");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="905.1372px" height="1100px" viewBox="0 300 721.464 889.561" enable-background="new 0 0 721.464 889.561"
xml:space="preserve">
<g id="section3">
<path id="section"
d="m 433.125,729.14792 -0.17857,32.67857 32.32143,0.44643 15.89286,-0.44643 11.78571,-3.03572 -11.33928,-35.26785 -19.82143,5.625 z"/>
</g>

svg clip image and show stroke

Hi I am new on this site so please forgive me if i am not clear about what i am trying to do
My Question is:-
I am using HTML5 and SVG to clip the image so that only the part of the image that is inside the clipping/polygon shape is displayed while any part outside the polygon shape is invisible/clipped
Also I wish to add stroke width and color to the polygon shape
The SVG code that i am using:-
<?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" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="455px" height="435px" viewPort="0 0 455 435" enable-background="new 0 0 455 435" xml:space="preserve">
<g>
<g>
<clipPath ID="SVGID_1_">
<path fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64
c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569
c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151
S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836
c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035
c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511
c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/>
</clipPath>
</g>
</g>
<a xlink:href="#">
<image clip-path="url(#SVGID_1_)" height="500" width="667" style="border-color:black;border-width:5;" xlink:href="img.jpg" />
</a>
</svg>
The above mentioned code works fine, it display's an image that has a polygon shape, only the image part falling inside the shape is displayed whereas any part falling outside the shape is hidden
But somehow I tried various things but still i am not able to display stroke/border.
My question is how to display the border/stroke on a polygon shape that is used to clip an image
Thanks in advance

At first, please write ID in small letters in order to make the clip path work: <clipPath id="SVGID_1_">
Second, just duplicate your path in order to use is as regular shape.
<?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" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="455px" height="435px" viewPort="0 0 455 435" enable-background="new 0 0 455 435" xml:space="preserve">
<g>
<g>
<clipPath id="SVGID_1_">
<path fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64
c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569
c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151
S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836
c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035
c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511
c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/>
</clipPath>
<path fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64
c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569
c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151
S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836
c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035
c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511
c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/>
</g>
</g>
<a xlink:href="#">
<image clip-path="url(#SVGID_1_)" height="500" width="667" style="border-color:black;border-width:5px;" xlink:href="img.jpg" />
</a>
</svg>
Alternatively, you can define you path as a shape and just refer to its name afterwards:
<?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" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="455px" height="435px" viewPort="0 0 455 435" enable-background="new 0 0 455 435" xml:space="preserve">
<defs>
<path id="myPath" fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64
c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569
c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151
S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836
c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035
c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511
c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/>
</defs>
<g>
<g>
<clipPath id="SVGID_1_">
<use xlink:href="#myPath" x="0" y="0"/>
</clipPath>
<use xlink:href="#myPath" x="0" y="0"/>
</g>
</g>
<a xlink:href="#">
<image clip-path="url(#SVGID_1_)" height="500" width="667" style="border-color:black;border-width:5px;" xlink:href="img.jpg" />
</a>
</svg>
Check out this doc.

Here you are using an image from within the SVG but if suppose you are using clip path on the image in your html code, you won't be able to give it border this way.
To achieve that you can apply the clip-path to the container div of the image too and then give it a background and border of the same color.

Resources