I got this little SVG grid
<svg id="grid-svg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="smallGrid" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M 10 0 L 0 0 0 10" fill="none" stroke="#000000" stroke-width="0.7" />
</pattern>
<pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
<rect width="100" height="100" fill="url(#smallGrid)" />
</pattern>
</defs>
<rect x="-100%" y="-100%" width="200%" height="200%" fill="url(#grid)" />
</svg>
I got it in a template html. Because I don't want it to remain in the main page for a reason.
Then I just clone that piece of SVG, create a wrapper div, and append the grid-svg to it.
Then I apply the grid dynamically with jQuery.
It works for Chrome and Firefox, but it doesn't work for IE 10 and IE 11.
Do you know why?
Thanks.
I am using the SVG using D3.js and i had the same issue.
I wrote the below code to resolve the issue
$('#lineChartSVG g').remove();
$('#lineChartSVG path').remove();
here i am removing the previous g and path, replacing with the new one.
Keep your tags in the static content and then call the above code where you used your code. This should work
This was solved already, i was doing a jquery clone() to get it from the template, which is wrong. Now it works fine.
Related
I'm using inline svgs. I have a svg circle and fill it with a pattern. The image inside needs to 100% of container size. This works until the parent element gets resized.
When the parent element(div) gets resized via js the pattern wont reflect 100% width and height anymore.
This works in Firefox though.
To me it seems like the css doesnt get updated. If I change the value to 99% manually Chrome updates the size on both dimensions.
This is the structure of my svg:
<div style="height:150px; width:150px;">
<svg style="height:100%; width:100%;">
<defs>
<pattern id="image" x="0%" y="0%" width="100%" height="100%">
<image x="0%" y="0%" width="58%" height="58%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="image.jpg"></image>
</pattern>
</defs>
<circle cx="50%" cy="50%" r="29%" fill="url(#image)">
</circle>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#other"></use>
</svg>
<div>
I had found similar questions, but without help:
Image inside svg pattern is blurried after zoom in Chrome (there the image gets blurry)
SVG <pattern> won't load when generated by Javascript (the question got closed without a good answer)
You need to add viewBox property in svg, please refer the following link:
https://css-tricks.com/scale-svg/
Updated Code -
function inc(){
var parent = document.getElementById('parent');
parent.style.width = '350px';
parent.style.height = '350px';
}
<div id='parent' style="height:150px; width:150px;">
<svg style="height:100%; width:100%;" viewBox="0 0 50 50">
<defs>
<pattern id="image" x="0%" y="0%" width="100%" height="100%">
<image x="0%" y="0%" width="58%" height="58%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="image.jpg"></image>
</pattern>
</defs>
<circle cx="50%" cy="50%" r="29%" fill="url(#image)">
</circle>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#other"></use>
</svg>
<div>
Increase
This below code works fine in chrome and filter is applied but fails in firefox. An extra space is also added by direct inclusion of svg definition in the html(This is present in all browsers). Not sure why its happening like this. Can someone let me know the issue, I am new to svg
Here is the codepen link: http://codepen.io/susheel61/pen/wJYgwr
<svg version="1.1" id="ThemeSvg">
<defs>
<g>
<!--/* Polygon definitions for overlay shape */-->
<rect id="red-poly" x="0%" y="0%" width="53%" height="100%" fill="#b5121b" transform="skewX(-10)"></rect>
<rect id="rect-fade-out" x="0%" y="0%" width="53%" height="100%" fill="url(#fade-out)" transform="skewX(-10)"></rect>
</g>
<g>
<filter id="red-angled-overlay" x="0%" y="0%" width="100%" height="100%">
<!--/* Bring in the mask for fading the image out */-->
<feImage xlink:href="#rect-fade-out" result="red-overlay" x="0" y="0"></feImage>
<!--/* Create composite of image and fade mask */-->
<feComposite in="SourceGraphic" in2="red-overlay" operator="out" result="composite"></feComposite>
<!--/* Bring in the colored polygon for the overlay */-->
<feImage xlink:href="#red-poly" result="overlay" x="0" y="0"></feImage>
<!--/* Blend the overlay with the faded image */-->
<feBlend in="composite" in2="overlay" mode="multiply"></feBlend>
</filter>
</g>
</defs>
</svg>
<svg version="1.1" viewBox="0 0 840 474" preserveAspectRatio="xMaxYMin slice">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://wowslider.com/sliders/demo-10/data/images/autumn_leaves.jpg" width="100%" height="100%" filter="url(#red-angled-overlay)" class="svg-black-overlay"></image>
</svg>
Firefox does not support feImage filters where the image is a fragment. It only supports feImage where the image is a complete standalone image or a data URI of a complete SVG document.
You'd have to create two additional standalone SVG images one with each polygon definition in and point the feImage elements at the complete image document in each case.
The below selector will not find <clipPath> elements inside <defs> on Chrome (38):
d3.selectAll('defs clipPath')
(This is D3.js code but I suspect underlying querySelectorAll issue)
It works fine on Firefox. Is there a different selector syntax to use that will work on both browsers?
In the example below on Firefox you will see the whole text because the clip path is removed. But on Chrome it will be cut off after 85 pixels because the clip path is not removed.
d3.selectAll('defs clipPath').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg height="200" width="400">
<defs>
<clipPath id="clip1">
<rect id='tt' x="0" y="0" width="85" height="15"></rect>
</clipPath>
</defs>
<text clip-path="url(#clip1)" x="0" y="15">This text should all be visible once we remove the clip-path</text>
</svg>
As Lars pointed out, this was a webkit bug, and now in Blink it still exists as Issue 237435: querySelectorAll unable to find SVG camelCase elements in HTML
So until it's fixed, using a class selector is probably the best workaround.
d3.selectAll('defs .clippy').remove();
d3.selectAll('defs .clippy').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg height="200" width="400">
<defs>
<clipPath id="clip1" class='clippy'>
<rect id='tt' x="0" y="0" width="85" height="15"></rect>
</clipPath>
</defs>
<text clip-path="url(#clip1)" x="0" y="15">This text should all be visible once we remove the clip-path</text>
</svg>
As shown in this fiddle it's possible to render a CSS sprite in SVG using the foreignObject element.
However this isn't supported in IE, so I was wondering if there was another way to do it.
I suspect the answer may be no, because I found two unresolved questions on this (1,2)
I'm using d3.js so any answer that spells out the d3 way to do this would be a bonus.
You could pick out parts of an image using a clipPath if necessary. Extend your jsfiddle like this to see what I mean...
<div class='source youtube'></div>
<svg width="100%" height="100%">
<foreignObject height=50 width=50>
<div class='source facebook'></div>
</foreignObject>
<defs>
<clipPath id="c">
<rect y="10" width="7" height="10"/>
</clipPath>
<clipPath id="c2">
<rect x="7" y="12" width="7" height="10"/>
</clipPath>
</defs>
<image transform="scale(4.5)" y="-5" width="40" height="20" xlink:href="https://s3.amazonaws.com/856/sprite.png" clip-path="url(#c)"/>
<g transform="translate(-30, 0)">
<image transform="scale(4.5)" x="0" y="0" width="40" height="20" xlink:href="https://s3.amazonaws.com/856/sprite.png" clip-path="url(#c2)"/>
</g>
<svg>
I have some pattern in svg that I applied to my rect, the code is like this
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" style="position:absolute; top:0px; left:0px">
<defs>
<rect id="unitsqr" fill="#DBDBDB" stroke="white" stroke-width="1px" x="0" y="0" width="12" height="12"/>
<pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
<use xlink:href="#unitsqr" />
</pattern>
</defs>
<rect fill="url(#grid)" x="0" y="0" width="100%" height="100%"/>
</svg>
I want to do some animation in raphael but also keep my grid , I don't get any clue on how to create a pattern in raphael and use it as a fill later. Is there a way to do that anyway?
When you do Element.attr("fill", "http://example.com/example.png") Raphaël creates a <pattern> element for you under-the-hood if the SVG backend is used. But there's no highlevel API support in Raphaël for creating and manipulating pattern fills. So, either you'll need to extend Raphaël or you can do it with plain js assuming you don't care about the VML fallback for IE8 and lower.
The correct syntax would be
Element.attr("fill" , "url(http://exmaple.com/example.png)") ;
You can do funky stuff like filling creating an image shaped like a circle or a path easily by creating an element using Raphael.path or Raphael.circle and setting the fill to a url.