I am working with the D3 library.
I want to export svg as a png image , check below code what is shown in this jsfiddle, when we are exporting svg as a png, pattern background image not exporting in png image. kindely check and revert.
I read that something like this can be accomplished using svg's patterns. So here is some of the D3 code I am using to append an image into a pattern:
d3.select("#downloadsvg").on("click", function(){
var html = d3.select("#svg > .pattern > svg")
.attr("version", 1.1)
.attr("xmlns", "http://www.w3.org/2000/svg")
.node().parentNode.innerHTML;
//console.log(html);
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
var img = '<img src="'+imgsrc+'">';
d3.select("#svgdataurl").html(img);
var canvas = document.querySelector("canvas"),
context = canvas.getContext("2d");
var image = new Image;
image.src = imgsrc;
image.onload = function() {
context.drawImage(image, 0, 0);
var canvasdata = canvas.toDataURL("image/png");
var pngimg = '<img src="'+canvasdata+'">';
d3.select("#pngdataurl").html(pngimg);
var a = document.createElement("a");
a.download = "sample.png";
a.href = canvasdata;
a.click();
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="svg">
<div class="pattern" style="margin: 25px;"><svg id="selectedsvg" width="250" height="250" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="contrast">
<feGaussianBlur stdDeviation="1.5"></feGaussianBlur>
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 .5 1 1"></feFuncR>
<feFuncG type="discrete" tableValues="0 .5 1"></feFuncG>
<feFuncB type="discrete" tableValues="0"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="brightness">
<feComponentTransfer>
<feFuncR type="linear" slope="5"></feFuncR>
<feFuncG type="linear" slope="5"></feFuncG>
<feFuncB type="linear" slope="5"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="grayscale">
<feColorMatrix values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0"></feColorMatrix>
</filter>
<filter id="saturate">
<feComponentTransfer>
<feFuncR tableValues="1 .33 .33" type="table"></feFuncR>
<feFuncG tableValues=".33 1 .33" type="table"></feFuncG>
<feFuncB tableValues=".33 .33 1" type="table"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="hue-rotate">
<feComponentTransfer>
<feFuncR type="table" tableValues="1 0"></feFuncR>
<feFuncG type="table" tableValues="1 0"></feFuncG>
<feFuncB type="table" tableValues="1 0"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="sepia">
<feComponentTransfer>
<feFuncR tableValues="0.15 .25" type="table"></feFuncR>
<feFuncG tableValues=".01 .25" type="table"></feFuncG>
<feFuncB tableValues="0 .09" type="table"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="invert">
<feComponentTransfer>
<feFuncR type="table" tableValues="1 0"></feFuncR>
<feFuncG type="table" tableValues="1 0"></feFuncG>
<feFuncB type="table" tableValues="1 0"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="blur">
<feGaussianBlur stdDeviation="10" result="outBlur"></feGaussianBlur>
</filter>
<pattern id="pattern1" height="100%" width="100%" patternContentUnits="objectBoundingBox"> <image height="1px" width="1px" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://halyca.kiwis-and-brownies.de/demo3/img/Embroidery1.png"></image></pattern>
<pattern id="pattern2" height="100%" width="100%" patternContentUnits="objectBoundingBox"> <image height="1px" width="1px" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://halyca.kiwis-and-brownies.de/demo3/img/Embroidery2.png"></image></pattern>
<pattern id="pattern3" height="100%" width="100%" patternContentUnits="objectBoundingBox"> <image height="1px" width="1px" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://halyca.kiwis-and-brownies.de/demo3/img/Embroidery3.png"></image></pattern>
<pattern id="pattern4" height="100%" width="100%" patternContentUnits="objectBoundingBox"> <image height="1px" width="1px" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://halyca.kiwis-and-brownies.de/demo3/img/Embroidery4.png"></image></pattern>
</defs>
<rect x="0%" y="0%" width="100%" height="100%" fill="#FC7A04" id="1" filter="url(#blur)"></rect>
<circle xmlns="http://www.w3.org/2000/svg" cx="50%" cy="50%" r="50%" stroke="black" stroke-width="0.5" id="c1" fill="url(#pattern-77)"></circle>
<circle xmlns="http://www.w3.org/2000/svg" cx="50%" cy="50%" r="40%" stroke="black" stroke-width="0.5" fill="#eee333" id="c2" filter="url(#blur)"></circle>
<circle xmlns="http://www.w3.org/2000/svg" cx="50%" cy="50%" r="30%" stroke="black" stroke-width="0.5" id="c3" fill="url(#pattern-94)"></circle>
<circle xmlns="http://www.w3.org/2000/svg" cx="50%" cy="50%" r="20%" stroke="black" stroke-width="0.5" id="c4"></circle>
<defs><pattern id="pattern-94" height="30%" width="30%" x="-0.05" y="-0.030000000000000006" patternContentUnits="objectBoundingBox"><image width="0.30000000000000004px" height="0.30000000000000004px" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://halyca.kiwis-and-brownies.de/media/configurator/embroidery/Embroidery4.png"></image></pattern></defs><defs><pattern id="pattern-77" height="20%" width="20%" x="-0.02" y="0.01" patternContentUnits="objectBoundingBox"><image width="0.20000000000000004px" height="0.20000000000000004px" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://halyca.kiwis-and-brownies.de/media/configurator/embroidery/Embroidery1.png"></image></pattern></defs><text x="8" y="238" id="text-21" font-size="27" font-family="Times New Roman" style="fill: rgb(184, 19, 59);" font-weight="bold" font-style="italic">sadja</text><path d="M9.5,15L118.5,97" stroke="black" stroke-width="1px"></path><path d="M119.5,98L216.5,9" stroke="black" stroke-width="1px"></path><path d="M217.5,10L217.5,10" stroke="black" stroke-width="1px"></path><path d="M217.5,10L9.5,15" stroke="black" stroke-width="1px"></path><path d="M10.5,16L10.5,16" stroke="black" stroke-width="1px"></path><path d="M11.5,35L11.5,35" stroke="black" stroke-width="1px"></path><path d="M11.5,35L11.5,35" stroke="black" stroke-width="1px"></path><path d="M206.5,143L206.5,143" stroke="black" stroke-width="1px"></path><path d="M206.5,143L206.5,143" stroke="black" stroke-width="1px"></path><path d="M163.5,32L163.5,32" stroke="black" stroke-width="1px"></path></svg> </div>
</div>
<canvas id="canvas1" width='380' height='378' hidden></canvas>
<button id="downloadsvg"> Save Svg</button>
First you have to embed your image into base64 using dataurl. after you can able to download the png with background
Related
In iOS Safari, the second rect disappears, why?
I expect it to display properly in iOS.
<svg style="width:800px; height:500px; display: inline;" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="myfilter" width="180%" height="160%" y="-30%" x="-40%">
<feGaussianBlur stdDeviation="1.5"></feGaussianBlur>
<feComponentTransfer result="blur">
<feFuncA type="table" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"></feFuncA>
</feComponentTransfer>
<feFlood flood-color="#221D4E" flood-opacity="0.9" result="color"></feFlood>
<feComposite in="color" in2="blur" operator="in" result="glow"></feComposite>
<feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur>
<feOffset dx="0" dy="0"></feOffset>
<feComponentTransfer result="shadow">
<feFuncR type="table" tableValues="1 1"></feFuncR>
<feFuncG type="table" tableValues="0.67 0.67"></feFuncG>
<feFuncB type="table" tableValues="0.21 0.21"></feFuncB>
<feFuncA type="table" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"></feFuncA>
</feComponentTransfer>
<feComposite in="glow" in2="shadow" operator="over" result="highlight" />
<feComposite in="SourceGraphic" in2="highlight" operator="over" />
</filter>
</defs>
<g transform="translate(0,25)">
<rect width="100" height="100" fill="red" x="100" style="filter:url(#myfilter)"></rect>
<rect width="100" height="20000" fill="red" x="250" style="filter:url(#myfilter)"></rect>
</g>
</svg>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
</head>
<body>
<svg style="width:800px; height:500px; display: inline;" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="myfilter" width="180%" height="160%" y="-30%" x="-40%">
<feGaussianBlur stdDeviation="1.5"></feGaussianBlur>
<feComponentTransfer result="blur">
<feFuncA type="table" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"></feFuncA>
</feComponentTransfer>
<feFlood flood-color="#221D4E" flood-opacity="0.9" result="color"></feFlood>
<feComposite in="color" in2="blur" operator="in" result="glow"></feComposite>
<feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur>
<feOffset dx="0" dy="0"></feOffset>
<feComponentTransfer result="shadow">
<feFuncR type="table" tableValues="1 1"></feFuncR>
<feFuncG type="table" tableValues="0.67 0.67"></feFuncG>
<feFuncB type="table" tableValues="0.21 0.21"></feFuncB>
<feFuncA type="table" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"></feFuncA>
</feComponentTransfer>
<feComposite in="glow" in2="shadow" operator="over" result="highlight" />
<feComposite in="SourceGraphic" in2="highlight" operator="over" />
</filter>
</defs>
<g transform="translate(0,25)">
<rect width="100" height="100" fill="red" x="100" style="filter:url(#myfilter)"></rect>
<rect width="100" height="20000" fill="red" x="250" style="filter:url(#myfilter)"></rect>
</g>
</svg>
</body>
</html>
chrome
enter image description here
iOS Safari
enter image description here
I expect it to display properly in iOS
iOS has a lot of memory optimizations. Your second rect is very large and mostly outside the initial viewBox, so iOS does not render the filter because it's taking up too much memory for off-screen rendering.
When you change the height of the rect (I'm on iPhone 12 Pro (128GB), iOS 16.1.1), the second rect disappears exactly at height = "6473" - so the largest rect height that this filter will support is 6472 on my phone.
Does this make any sense - probably not, but welcome to Apple's web team.
I want to apply an SVG filter with a transition. I want it to be applied when the mouse is on it and discarded when the mouse left it. I've tried this code but it didn't work. How can I do that?
var rect = document.querySelector("rect")
var use = document.querySelector("#fs")
rect.addEventListener("mouseover", () => {
rect.setAttribute("filter","url(#filter)")
use.setAttribute("href","startA")
})
rect.addEventListener("mouseleave", () => {
rect.setAttribute("filter","")
use.setAttribute("href","stopA")
})
<svg width="400" height="400">
<defs>
<animate id="startA" attributeName="stdDeviation" values="0;10" dur="1s"></animate>
<animate id="stopA" attributeName="stdDeviation" values="10;0" dur="1s"></animate>
</defs>
<filter id="filter">
<feGaussianBlur in="SourceGraphic" stdDeviation="10">
<use id="fs"/>
</feGaussianBlur>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<rect x="50" y="50" width="180" height="180" fill="#4a8"></rect>
</svg>
You're trying to mix SMIL and javascript when you can do the whole thing in SMIL.
<svg width="400" height="400">
<filter id="filter">
<feGaussianBlur in="SourceGraphic" stdDeviation="0">
<animate begin="r.mouseover" attributeName="stdDeviation" values="0;10" dur="1s" fill="freeze"></animate>
<animate begin="r.mouseout" attributeName="stdDeviation" values="10;0" dur="1s" fill="freeze"></animate>
</feGaussianBlur>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<rect id="r" x="50" y="50" width="180" height="180" fill="#4a8" filter="url(#filter)"></rect>
</svg>
I have an SVG who's stroke i am animating useing anime.js like so:
$(function() {
var lineDrawing = anime({
targets: '#layer1 path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: function(el, i) {
return i * 250
},
direction: 'alternate',
loop: true
});
});
My SVG is below:
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 195.22488 193.54251" version="1.1" id="svg8" inkscape:version="0.92.1 r15371" sodipodi:docname="star.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="-99.713793"
inkscape:cy="369.29872"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:snap-to-guides="true"
inkscape:window-width="1366"
inkscape:window-height="705"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-9.3736792,-53.001107)"
fill="none"
fill-rule="evenodd"
stroke="currentColor"
stroke-width="5"
>
<path
sodipodi:type="star"
style="fill:#d4ff2a"
id="path10"
sodipodi:sides="5"
sodipodi:cx="111.125"
sodipodi:cy="155.6369"
sodipodi:r1="97.857147"
sodipodi:r2="48.928574"
sodipodi:arg1="0.81271377"
sodipodi:arg2="1.4410323"
inkscape:flatsided="false"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 178.40476,226.69642 -60.94839,-22.54231 -53.122401,37.42824 2.604927,-64.93132 -52.012102,-38.95644 62.558327,-17.58745 20.977149,-61.504647 36.05825,54.061687 64.97669,0.94447 -40.27311,50.99941 z"
inkscape:transform-center-x="3.9129994"
inkscape:transform-center-y="-5.5444732" />
</g>
</svg>
FIDDLE HERE , I went through the doc's and there are examples on how to animate the stroke of an SVG, but what i really want to do is animate the fill of the SVG, I.E. animate the fill from the bottom to up. How do i do this ?
I have gone through the doc's but i don't see much of a clue.
EDIT :- To simplify my question, how exactly would i have to modify my SVG to animate the fill(or maybe i have to modify the fill to be something else) to move from downwards to up ?
you can add a <linear gradient> and animate its <stop>s ( without the library ), check animate svg gradients for more details.
$(function() {
var lineDrawing = anime({
targets: '#layer1 path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: function(el, i) {
return i * 250
},
direction: 'alternate',
loop: true
});
});
.svg__holder {
max-width: 300px;
margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="layer1" width="100%" height="100%" viewBox='0 0 850 800'>
<defs>
<linearGradient id="bottom-to-top" y1="100%" x2="0%" y2="0%">
<stop offset="0" stop-color="rgb(212, 255, 42)">
<animate dur="5s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
<stop offset="0" stop-color="#fff">
<animate dur="5s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
</linearGradient>
</defs>
<path class="path" stroke="#000000" fill="url(#bottom-to-top)" stroke-width="3" opacity="1" d="m 178.40476,226.69642 -60.94839,-22.54231 -53.122401,37.42824 2.604927,-64.93132 -52.012102,-38.95644 62.558327,-17.58745 20.977149,-61.504647 36.05825,54.061687 64.97669,0.94447 -40.27311,50.99941 z" id="svg_1" />
</svg>
The only way I know to do this is to define the background as a pattern instead of using a fill color. I don't know anime.js but I think it should be pretty simple to manipulate the x and y values of the background as well.
Using your jsfiddle:
.. define background:
<defs
id="defs2" />
<pattern id="background" patternUnits="userSpaceOnUse" width="500" height="500" > <rect fill="#0000FF" x="0" y="150" width="500" height="500"> </image> </pattern>
...
</defs>
.. set background:
<path
sodipodi:type="star"
style="fill: url(#background)"
id="path10"
...
</path>
Here is an example: https://jsfiddle.net/z8ok9osg/
I have an SVG element loaded from an <object> tag. This file was made externally so there are all sorts of transforms applied to it.
Additionally, I am resizing the entire element with CSS.
In my SVG image I have a <path> mask in the <defs> section and an identical one at the root of the SVG element.
Frustratingly, the mask is not where I want it to be and I am not sure why. As a test, I created an identical path at the bottom of my SVG, (not in a group or anything), and the paths do not line up (even when everything in the paths is the exact same.
Is there some way / reason that two elements with the exact same paths and transformations would not be identical?
Are coordinates in the <defs> section treated differently?
Here is a simplified example of my code (the whole code is below this):
<object type="image/svg+xml" data="http://localhost:8000/assets/imagesvg" id="logo" height="160.75623mm" width="163.64865mm">
<svg viewBox="0 0 579.85743 569.60867">
<defs id="defs4">
<mask id="mask3" x="0" y="0" width="100" height="100">
<path xmlns="http://www.w3.org/2000/svg" id="my-path2" stroke-width="15" fill="none" stroke="#f0f" d="M 325.13558948214785 96.53577318284954 A 213.26045386528068 213.26045386528068 0 1 0 309.20001220703125 522.4604660723119" transform="matrix(0.938091, 0, 0, 0.938091, -0.128913, -0)"/>
</mask>
</defs>
<path xmlns="http://www.w3.org/2000/svg" id="my-path" stroke-width="15" fill="none" stroke="#f0f" d="M 325.13558948214785 96.53577318284954 A 213.26045386528068 213.26045386528068 0 1 0 309.20001220703125 522.4604660723119" transform="matrix(0.938091, 0, 0, 0.938091, -0.128913, -0)"/>
</svg>
</object>
As you can see the two paths are identical, so I am not sure what the issue is.
Both elements are in the root of the SVG element so I would assume they are the same. The path size is correct, but it looks like the origin is shifted up and to the left for the <defs><mask> element. The amount by witch the paths differ are the same when the SVG element is resized with CSS.
Full SVG
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" id="svg2" viewBox="0 0 579.85743 569.60867" height="160.75623mm" width="163.64865mm" inkscape:version="0.91 r13725" sodipodi:docname="knob.svg" inkscape:label="Layer">
<sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1536" inkscape:window-height="841" id="namedview12" showgrid="false" inkscape:zoom="0.44851478" inkscape:cx="-150.69173" inkscape:cy="425.05921" inkscape:window-x="3832" inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="layer3" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0"/>
<defs id="defs4">
<linearGradient inkscape:collect="always" id="linearGradient6371">
<stop style="stop-color:#000000;stop-opacity:1;" offset="0" id="stop6373"/>
<stop style="stop-color:#000000;stop-opacity:0;" offset="1" id="stop6375"/>
</linearGradient>
<radialGradient inkscape:collect="always" xlink:href="#linearGradient6371" id="radialGradient6377" cx="185.47202" cy="377.83094" fx="185.47202" fy="377.83094" r="111.97905" gradientTransform="matrix(1,0,0,0.60178603,0,150.45756)" gradientUnits="userSpaceOnUse"/>
<mask id="mask3" x="0" y="0" width="100" height="100">
<path id="my-path2" stroke-width="15" fill="none" stroke="#f0f" d="M 325.13558948214785 96.53577318284954 A 213.26045386528068 213.26045386528068 0 1 0 309.20001220703125 522.4604660723119" transform="matrix(0.938091, 0, 0, 0.938091, -0.128913, -0)"/>
</mask>
</defs>
<metadata id="metadata7">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g inkscape:groupmode="layer" id="layer3" mask="url(#mask3)" inkscape:label="Main Layer" style="display:inline" transform="translate(-73.492973,-42.944066)">
<g transform="translate(11.564708,-126.05435)" style="display:inline" id="layer4">
<path id="dialfill" d="m 211.42857,680.93363 67.14286,-92.85714 -64.28572,-62.85714 -18.57142,-78.57143 17.14285,-78.57143 82.85715,-75.71429 67.14285,-7.14285 57.14286,11.42857 57.14286,44.28571 27.14285,48.57143 7.14286,64.28572 L 500,510.93363 l -34.28571,44.28572 -18.57143,18.57143 75.71428,98.57142 68.57143,-70 35.71429,-85.71428 7.14285,-88.57143 L 620,353.79078 c 0,0 -72.85714,-117.14286 -97.14286,-127.14286 -24.28571,-10 -57.14285,-34.28572 -57.14285,-34.28572 l -102.85715,-22.85714 -82.85714,10 -111.42857,61.42857 c 0,0 -88.57143,125.71429 -84.285716,140 4.285715,14.28572 -5.714285,111.42857 -5.714285,111.42857 l 25.714281,78.57143 48.57143,67.14286 58.57143,47.14286 z" style="fill:#f3fc00;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" inkscape:connector-curvature="0"/>
</g>
<rect style="display:inline;fill:url(#radialGradient6377);fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1" id="rect-mask" width="222.9581" height="133.77486" x="73.992973" y="310.94351"/>
<g style="display:inline" id="layer1" transform="translate(11.564708,-121.59518)">
<circle r="277.14285" cy="449.50507" cx="357.14285" id="outerRim" style="fill:none;fill-rule:evenodd;stroke:#00f000;stroke-width:15;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
<circle r="158.57143" cy="445.21933" cx="355.71429" id="path4153" style="fill:none;stroke:#00f000;stroke-width:15;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
<path id="path4155" d="M 285.71429,586.64792 211.42857,692.3622" style="fill:none;fill-rule:evenodd;stroke:#00ff00;stroke-width:15;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" inkscape:connector-curvature="0"/>
<path id="path4157" d="m 448.57143,575.21935 82.85714,97.14285" style="fill:none;fill-rule:evenodd;stroke:#00ff00;stroke-width:15;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" inkscape:connector-curvature="0"/>
</g>
</g>
<path id="my-path" stroke-width="15" fill="none" stroke="#f0f" d="M 325.13558948214785 96.53577318284954 A 213.26045386528068 213.26045386528068 0 1 0 309.20001220703125 522.4604660723119" transform="matrix(0.938091, 0, 0, 0.938091, -0.128913, -0)"/>
</svg>
I have seen this amazing demo of the new
-webkit-backdrop-filter: blur(Xpx);
and I would like to ask how to reproduce this with JavaScript that at least works in Chrome but possibly in Firefox too?
The Demo:
https://webkit.org/demos/backdrop-filter/
You could try svg filters:
http://codepen.io/MakiBM/pen/YGEgQK?editors=1000
<svg x="0px" y="0px" width="500px" height="500px" viewbox="0 0 500 500">
<defs>
<filter id="blur" x="0%" y="0%" height="100%" width="100%" primitiveUnits="userSpaceOnUse">
<feGaussianBlur x="50" y="50" width="400" height="400" stdDeviation="10" in="SourceGraphic" result="blurImg"/>
<feComponentTransfer in="blurImg" result="opaqueBlur">
<feFuncA type="linear" intercept="1"/>
</feComponentTransfer>
<feBlend mode="normal" in="opaqueBlur" in2="SourceGraphic"/>
</filter>
</defs>
<image filter="url(#blur)" x="10" y="10" id="svg-image" width="100%" height="100%" xlink:href="https://www.nycgovparks.org/photo_gallery/full_size/14413.jpg" />
<rect x="50" y="50" height="400" width="400" fill="rgb(255,255,255)" fill-opacity="0.2" />
</svg>
I haven't go round with crossbrowser check but support is very wide:
http://caniuse.com/svg-filters