Pattern fill into svg [closed] - svg
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I have a 3 step requirement for my svg manipulation.
I want to upload svg from my machine
I want fill that svg with a grid pattern
And save that manipulated svg.
And leads will be helpful
My code so far
I have initialised a svg which must be filled by the pattern
and initialised a pattern tag which is to be filled in the main svg
On clicking button just donut must be filled
<html>
<head>
<!-- <script type="text/javascript" src="svg.js"></script> -->
<!-- <script type="text/javascript" src="script.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
crossorigin="anonymous"></script>
<script src="svg.select.js"></script>
<!-- <script src="script.js"></script> -->
</head>
<style>
.patternid{ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSIjMDAwMDAwIiAvPgogIDxjaXJjbGUgY3g9IjEiIGN5PSIxIiByPSIxIiBmaWxsPSIjNTU5NGU3Ii8+Cjwvc3ZnPg==")};
</style>
<body>
<svg id="patternid" height="8" width="8" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="crosshatch" patternUnits="userSpaceOnUse" width="8" height="8">
<image xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path fill='#fff' d='M0 0h8v8h-8z'/><path d='M0 0l8 8zm8 0l-8 8z' stroke-width='.5' stroke='#aaa'/></svg>" x="0" y="0" width="8" height="8">
</image>
</pattern>
</defs>
</svg>
<button onclick="getsvg()">HERE</button>
<div >
<?xml version="1.0" encoding="utf-8"?>
<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
<svg class="svgimage" version="1.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" enable-background="new 0 0 1000 1000" xml:space="preserve">
<g ><g transform="translate(0.000000,511.000000) scale(0.100000,-0.100000)">
<path d="M4523.9,4692.3C2296.6,4471.9,510.3,2894.4,161.4,841.6C-133.7-893,650.2-2633.4,2181.6-3647.3c2351.8-1552.5,5616-877.8,7066.9,1460.5c308.6,500.3,517.5,1065.7,615.3,1677.1c47.9,293.3,47.9,950.7,1.9,1245.9c-157.2,985.2-613.3,1863-1328.3,2560.7C7765,4046.4,6820.1,4502.5,5704.6,4667.4C5465,4701.9,4769.2,4717.2,4523.9,4692.3z M5616.4,4368.4C7904.9,4069.4,9607,2246.6,9603.1,96c-1.9-569.3-90.1-707.3-619.1-967.9c-607.6-299-739.9-444.7-845.3-937.3c-26.8-124.6-72.8-274.1-101.6-331.6c-97.7-199.3-297.1-358.4-532.8-423.6c-51.7-13.4-272.2-34.5-488.8-44.1s-421.7-26.8-456.2-36.4c-128.4-38.3-239.6-124.6-488.8-373.8c-205.1-207-276-266.4-377.6-314.3c-295.2-138-682.3-130.3-960.3,19.2c-67.1,34.5-203.2,141.8-312.4,245.3c-346.9,325.8-438.9,385.3-701.5,452.3c-107.3,26.8-174.4,30.7-488.8,15.3c-661.3-28.7-751.4-24.9-874,36.4c-120.8,57.5-241.5,178.3-304.8,299c-21.1,44.1-61.3,172.5-86.3,285.6c-53.7,249.2-103.5,381.4-193.6,532.8c-130.3,218.5-274.1,323.9-624.8,460C711.5-820.2,588.9-737.8,491.1-542.2c-80.5,161-111.2,615.3-69,1040.8c145.7,1427.9,1035,2693,2380.6,3381.1c490.7,253,1079.1,431.3,1606.2,488.8c99.7,9.6,212.8,23,249.2,26.8C4776.9,4408.6,5447.7,4391.4,5616.4,4368.4z M9384.6-1182.4c-484.9-1429.9-1755.7-2532-3327.4-2882.7c-354.6-78.6-607.6-103.5-1054.2-103.5c-446.6,0-699.6,24.9-1054.2,103.5c-1186.4,264.5-2210,956.4-2861.6,1932c-61.3,92-164.8,274.1-231.9,406.3C734.5-1491,583.1-1117.3,600.4-1100c5.8,3.8,44.1-9.6,86.3-30.7c42.2-21.1,164.8-72.8,276-113.1c109.2-42.2,235.8-93.9,281.8-116.9c199.3-103.5,331.6-295.2,394.8-576.9c109.3-492.6,235.8-703.4,527.1-875.9c161-93.9,256.8-111.2,584.6-103.5c168.7,3.8,444.7,9.6,613.3,9.6c306.7,1.9,306.7,1.9,435.1-59.4c95.8-44.1,182.1-111.2,335.4-258.8c308.6-295.2,429.3-375.7,695.8-458.1c189.8-59.4,596.1-65.2,774.3-9.6c272.2,82.4,475.3,222.3,737.9,507.9c226.2,249.2,233.8,251.1,699.6,272.2c279.8,11.5,425.5,26.8,534.7,53.7c452.4,116.9,749.4,442.8,847.2,929.6c61.3,300.9,86.3,358.4,210.8,481.1c97.7,99.7,168.7,143.8,460,291.3c189.8,95.8,346.9,172.5,348.8,170.6C9447.9-988.8,9421.1-1077,9384.6-1182.4z"/>
<path d="M4207.6,3956.3c-61.3-59.4-63.2-149.5-3.8-207c32.6-34.5,136.1-63.3,507.9-143.8c515.6-111.2,540.5-111.2,596.1,3.8c38.3,82.4-9.6,176.3-107.3,201.3c-145.7,38.3-872.1,193.6-908.5,193.6C4270.9,4004.2,4232.5,3983.1,4207.6,3956.3z"/>
<path d="M6178,3268.2c-26.8-34.5-49.8-141.8-90.1-440.8c-28.8-218.5-47.9-417.9-42.1-444.7c17.2-67.1,128.4-116.9,191.7-88.2c26.8,11.5,59.4,40.2,74.7,65.2c24.9,40.2,128.4,701.5,128.4,824.2C6440.6,3300.8,6250.8,3362.1,6178,3268.2z"/>
<path d="M7423.8,3227.9c-90.1-63.2-78.6-118.8,99.7-494.5c90.1-191.7,182.1-364.2,205.1-381.4c86.3-74.8,245.3-5.7,245.3,107.3c0,70.9-333.5,751.4-379.5,776.3C7538.8,3264.3,7471.8,3262.4,7423.8,3227.9z"/>
<path d="M4207.6,2658.7c-322-316.3-337.3-343.1-256.8-444.7c30.7-38.3,55.6-49.8,113.1-49.8c70.9,0,92,17.3,373.8,293.3c245.3,239.6,297.1,300.9,297.1,345c0,76.7-78.6,147.6-161,147.6C4512.4,2950,4477.9,2921.3,4207.6,2658.7z"/>
<path d="M2128,2771.8c-70.9-36.4-107.3-113.1-86.3-180.2c26.8-76.7,718.8-542.4,805-542.4c118.8,0,191.7,162.9,109.3,245.3c-51.8,49.8-697.7,479.2-741.8,490.7C2193.1,2790.9,2154.8,2785.2,2128,2771.8z"/>
<path d="M4658,1847.9c-452.3-72.8-898.9-325.8-1140.4-644C2877.4,358.6,3396.9-726.2,4569.9-992.7c170.6-38.3,661.3-44.1,826.1-9.6c578.8,124.6,1025.4,442.8,1238.2,877.9c398.7,820.4-157.1,1727-1199.9,1955.1C5244.6,1872.8,4857.4,1882.4,4658,1847.9z M5319.3,1541.2C6078.3,1409,6586.2,797.5,6431,199.5c-222.3-852.9-1506.5-1217.1-2351.8-663.2C3485-74.6,3375.8,602,3828.1,1092.7C4173.1,1464.6,4752,1639,5319.3,1541.2z"/>
<path d="M7581,1589.1c-203.2-86.3-379.5-170.6-396.8-193.6c-69-84.3-24.9-214.7,78.6-237.7c44.1-9.6,130.3,19.2,389.1,126.5c408.3,168.7,429.3,178.3,467.7,237.7c55.6,86.3-21.1,222.3-124.6,220.4C7968.2,1740.6,7782.3,1671.6,7581,1589.1z"/>
<path d="M1687.1,945.1c-184-153.3-345-293.3-358.4-310.5c-67.1-88.2,13.4-233.8,126.5-233.8c47.9,0,126.5,55.6,402.5,287.5c189.8,157.2,354.6,302.8,364.2,323.9c30.7,57.5,24.9,105.4-19.2,162.9c-28.8,38.3-55.6,49.8-109.2,49.8C2030.2,1225,1984.2,1192.4,1687.1,945.1z"/>
<path d="M7715.2,257c-59.4-57.5-61.3-126.5-3.8-189.8c55.6-65.2,772.4-471.5,851-484.9c120.8-21.1,208.9,143.8,126.5,239.6c-59.4,67.1-808.8,483-870.2,483C7784.2,304.9,7742,285.8,7715.2,257z"/>
<path d="M2342.7-224.1c-24.9-17.2-51.8-49.8-61.3-74.7c-19.2-51.8,101.6-912.4,136.1-981.4c49.8-93.9,195.5-93.9,256.8,1.9c30.7,44.1,26.8,76.7-36.4,509.9c-38.3,254.9-78.6,479.2-90.1,500.2c-19.2,36.4-90.1,74.8-138,74.8C2396.3-193.4,2365.6-206.8,2342.7-224.1z"/>
<path d="M7167-636.2c-26.8-9.6-59.4-38.3-70.9-61.3c-13.4-23-65.2-247.3-118.8-496.4c-90.1-425.5-95.8-458.1-69-511.8c47.9-90.1,151.4-107.3,230-34.5c40.2,36.4,59.4,105.4,145.7,506c53.7,256.8,93.9,481.1,86.3,500.3C7345.3-651.5,7249.4-607.4,7167-636.2z"/>
<path d="M3816.6-1696.1c-463.8-283.7-507.9-333.5-387.2-454.3c30.7-30.7,74.7-55.6,99.7-55.6c46,0,816.5,461.9,856.8,513.7c36.4,47.9,28.8,151.4-15.3,195.5C4293.9-1420.1,4232.5-1443.1,3816.6-1696.1z"/>
<path d="M5328.9-1617.5c-55.6-28.8-86.3-103.5-70.9-170.6c7.7-30.7,139.9-162.9,360.4-358.4c279.8-249.2,358.4-308.6,404.4-308.6c101.6,0,176.3,116.9,138,218.5c-13.4,32.6-630.6,588.4-691.9,622.9C5417.1-1586.9,5388.3-1586.9,5328.9-1617.5z"/></g></g>
</svg>
</div>
<script>
function getsvg(){
$('.svgimage').addClass('patternid')
let mapContainer = SVG.select('#patternid');
let myMapObject = mapContainer.first();
console.log(myMapObject)
}
</script>
</body>
</html>
I took SVG from this answer. You can take another svg and solution it will work there the pattern.
<svg viewbox="200 190 500 500" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="patt"
x="0" y="0" width="10" height="10"
patternUnits="userSpaceOnUse" >
<g fill="none" stroke="#d3d3d3" stroke-width="0.5" >
<rect x="0" y="0" width="10" height="10" />
</g>
</pattern>
</defs>
<g fill="url(#patt)" stroke="orange" >
<path id="CD11110" class="OUTLINE CD11110" d="M 455 297 l 4 -2 1 0 1 0 3 -1 4 5 7 3 2 6 0 8 -11 2 -11 1 -8 0 -9 1 -8 1 -9 1 -9 -2 -10 -1 -9 1 -4 3 -2 3 -6 -6 -3 -4 -5 -6 -4 -5 -2 -5 5 -3 0 -6 0 -10 0 -9 1 -9 -3 -4 -2 0 -2 0 -1 -4 0 -9 -5 -9 1 -10 -1 -11 -1 -6 2 -6 5 -2 7 -3 10 -2 2 -1 3 0 1 0 4 -2 8 -1 3 6 4 1 3 8 3 10 1 6 3 5 0 9 0 7 -1 5 -6 3 -6 4 -1 5 6 4 5 3 5 4 9 1 10 0 4 4 3 4 5 10 1 3 z " />
<path id="CD11140" class="OUTLINE" d="M 477 316 l 0 9 5 5 -1 3 -4 5 -4 5 -5 4 -4 7 -3 4 -4 3 -4 10 -2 -1 -3 -7 -2 -5 -2 1 -1 0 -2 -1 -3 1 0 0 -3 1 -4 2 -5 -5 -6 -3 -10 -3 -4 -1 -3 -1 -2 2 -4 -1 -3 -1 -9 0 -2 2 -4 3 0 -7 1 -4 -2 -2 0 -1 6 -3 6 -4 -1 -2 -2 -5 2 -3 4 -3 9 -1 10 1 9 2 9 -1 8 -1 9 -1 8 0 11 -1 z " />
<path id="CD11170" class="OUTLINE" d="M 394 349 l 3 1 4 1 2 -2 3 1 4 1 10 3 6 3 5 5 4 -2 3 -1 0 0 3 -1 2 1 1 0 2 -1 2 5 3 7 2 1 5 9 6 2 2 9 -4 5 -4 5 -5 6 -3 4 -5 4 -5 5 -5 4 -5 3 -8 8 -5 8 -7 3 -7 -1 -10 -4 -3 -1 -6 -3 -6 -5 -5 -3 -6 -3 -9 -3 1 -5 0 -10 -2 -8 -6 -11 5 -2 4 -1 5 -4 5 -6 2 -5 3 -6 6 -5 0 -3 -2 -3 4 -3 2 -2 z " />
</g>
</svg>
Another pattern with a grid of colored squares
<svg viewbox="200 190 500 500" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="patt"
x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse" >
<g fill="#85D2FF" fill-opacity="0.7">
<rect x="0" y="0" width="10" height="10" />
<rect x="10" y="10" width="10" height="10" />
</g>
</pattern>
</defs>
<g stroke="#000" fill="url(#patt)" >
<path id="CD11110" class="OUTLINE CD11110" d="M 455 297 l 4 -2 1 0 1 0 3 -1 4 5 7 3 2 6 0 8 -11 2 -11 1 -8 0 -9 1 -8 1 -9 1 -9 -2 -10 -1 -9 1 -4 3 -2 3 -6 -6 -3 -4 -5 -6 -4 -5 -2 -5 5 -3 0 -6 0 -10 0 -9 1 -9 -3 -4 -2 0 -2 0 -1 -4 0 -9 -5 -9 1 -10 -1 -11 -1 -6 2 -6 5 -2 7 -3 10 -2 2 -1 3 0 1 0 4 -2 8 -1 3 6 4 1 3 8 3 10 1 6 3 5 0 9 0 7 -1 5 -6 3 -6 4 -1 5 6 4 5 3 5 4 9 1 10 0 4 4 3 4 5 10 1 3 z " />
<path id="CD11140" class="OUTLINE" d="M 477 316 l 0 9 5 5 -1 3 -4 5 -4 5 -5 4 -4 7 -3 4 -4 3 -4 10 -2 -1 -3 -7 -2 -5 -2 1 -1 0 -2 -1 -3 1 0 0 -3 1 -4 2 -5 -5 -6 -3 -10 -3 -4 -1 -3 -1 -2 2 -4 -1 -3 -1 -9 0 -2 2 -4 3 0 -7 1 -4 -2 -2 0 -1 6 -3 6 -4 -1 -2 -2 -5 2 -3 4 -3 9 -1 10 1 9 2 9 -1 8 -1 9 -1 8 0 11 -1 z " />
<path id="CD11170" class="OUTLINE" d="M 394 349 l 3 1 4 1 2 -2 3 1 4 1 10 3 6 3 5 5 4 -2 3 -1 0 0 3 -1 2 1 1 0 2 -1 2 5 3 7 2 1 5 9 6 2 2 9 -4 5 -4 5 -5 6 -3 4 -5 4 -5 5 -5 4 -5 3 -8 8 -5 8 -7 3 -7 -1 -10 -4 -3 -1 -6 -3 -6 -5 -5 -3 -6 -3 -9 -3 1 -5 0 -10 -2 -8 -6 -11 5 -2 4 -1 5 -4 5 -6 2 -5 3 -6 6 -5 0 -3 -2 -3 4 -3 2 -2 z " />
</g>
</svg>
Related
SVG: fill path only applies to border. How can I fill inside shape?
I want to fill the inside of this shape with red. When I use style="fill: red;" it only colors the shape border and not the inside. What attribute should I use to fill inside the shape ? <svg> <path d="M1077.0021,426.94783h-355a9.01357,9.01357,0,0,0-,9v228a9.01357,9.01357,0,0,0,9,9h355a9.01357,9.01357,0,0,0,9-9v-228A9.01357,9.01357,0,0,0,1077.0021,426.94783Zm7,237a7.00778,7.00778,0,0,1-7,7h-355a7.00778,7.00778,0,0,1-7-7v-228a7.00779,7.00779,0,0,1,7-7h355a7.00779,7.00779,0,0,1,7,7Z" transform="translate(-113.9979 -130.05217)" style="fill: red;" /> </svg>
There was something wrong in that path. I think it was the z in the middle of it all. In some of the arches there was a comma missing. I cleaned up the path and moved it to 0,0. I used the tool SvgPathEditor for all of this. <svg viewBox="0 0 373 246"> <path d="m 364 0 h -355 a 9 9 0 0 0 -9 9 v 228 a 9 9 0 0 0 9 9 h 355 a 9 9 0 0 0 9 -9 v -228 a 9 9 0 0 0 -9 -9 z M 371 237 a 7 7 0 0 1 -7 7 h -355 a 7 7 0 0 1 -7 -7 v -228 a 7 7 0 0 1 7 -7 h 355 a 7 7 0 0 1 7 7 z" style="fill: red;" /> </svg> Update The inside should also be filled. An alternative could be to split the path into two and then give them a fill each. <svg viewBox="0 0 373 246"> <path d="m 364 0 h -355 a 9 9 0 0 0 -9 9 v 228 a 9 9 0 0 0 9 9 h 355 a 9 9 0 0 0 9 -9 v -228 a 9 9 0 0 0 -9 -9 z" style="fill: darkred;" /> <path d="M 371 237 a 7 7 0 0 1 -7 7 h -355 a 7 7 0 0 1 -7 -7 v -228 a 7 7 0 0 1 7 -7 h 355 a 7 7 0 0 1 7 7 z" style="fill: tomato;" /> </svg>
Parse mutilple children attributes of element using cheerio in NodeJs
I have svg file that looks like this
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="300.000000pt" height="226.000000pt" viewBox="0 0 300.000000 226.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,226.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M891 2162 c-95 -33 -418 -606 -616 -1092 -75 -185 -106 -330 -70 -67 -2 3 7 36 19 75 13
27 67 2 -3 -7 -36 -19 -75z"/>
<path d="M1316 2019 c-33 -39 -8035 -57 -37 -58 -82 -59 -25 0 -55 -2 -66 -4 -11 -2 -58 -8 -104
-15 -158 -22 -330 -77 -315 -101 10 -17 85 -5 311 51 -12 -15 -27z"/>
<path d="M925 1349 c-4 -6 -5 -12 -2 -15 2 -3 7 2 10 11 7 17 1 20 -8 4z"/>
</g>
</svg>
I want to get d attribute of each path element and combine it in one svg path string (that consists of all three paths )
I've tried this buy only get first one every time
fs.readFile(path_to_svg,'utf8',(err,data)=>{
if(err) console.log(err);
$ = cheerio.load(data,{ xmlMode : true });
$('svg').children().each(function(i,path){
console.log($('path').attr('d'))
});
});
You can get those with:
$('svg path').get().map(path => $(path).attr('d'))
SVG Chess Fonts are not Solid
I convert PGN chess pieces into SVG files then load them up into Glyphr Studio that makes a .OTF file so that I use then in various chess programs. Unfortunately after installing the font the white pieces are all transparent instead of being a solid white piece. Could someone have a look at my code to see why I have this problem, this is the white rook. <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="315.000000pt" height="271.000000pt" viewBox="0 0 315.000000 271.000000" preserveAspectRatio="xMidYMid meet"> <g transform="translate(0.000000,271.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"> <path d="M387 2423 c-4 -3 -7 -386 -7 -850 l0 -843 -57 -26 c-67 -29 -126 -82 -155 -138 -29 -57 -36 -173 -13 -233 24 -63 94 -135 158 -164 l52 -24 1205 0 c1161 0 1207 1 1254 19 200 77 252 338 95 481 -24 23 -70 51 -101 64 l-58 23 -2 847 -3 846 -305 0 -305 0 -3 -162 -2 -163 -130 0 -130 0 -2 163 -3 162 -305 0 -305 0 -3 -162 -2 -163 -130 0 -130 0 -2 163 -3 162 -301 3 c-165 1 -303 -1 -307 -5z m473 -298 l0 -165 270 0 270 0 0 165 0 165 170 0 170 0 0 -165 0 -165 270 0 270 0 0 165 0 165 170 0 170 0 0 -780 0 -780 -1050 0 -1050 0 0 780 0 780 170 0 170 0 0 -165z m1912 -1562 c118 -54 118 -202 0 -256 l-47 -22 -1150 0 -1150 0 -47 22 c-57 26 -88 71 -88 128 0 46 28 98 62 116 70 38 70 38 1238 36 l1135 -2 47 -22z"/> </g> </svg>
how to delete the sample that don't have data for the whole period?
I have a dataset that looks like this. sample day 1 -10 1 -9 . . . . . . 1 10 2 -10 3 -10 . . . . . . 3 10 I want only the sample with whole period from -10 to 10. In this case the sample 2 must be deleted. But the missing period for each sample is different some go from -10 to 0, some -10 to -8 (number of rows for each sample is varied). How should I write in pandas or excel to delete incomplete samples?
IIUC, you need to use a boolean expression, if the period is alwas -10 to 10 then the sum of these numbers should always be 0
print(df)
sample day
0 1 -10
0 1 -9
0 1 -8
0 1 -7
0 1 -6
0 1 -5
0 1 -4
0 1 -3
0 1 10
.......
1 2 4
1 2 5
df1 = df[df.groupby(['sample'])['day'].transform('sum').eq(0)]
print(df1)
sample day
0 1 -10
0 1 -9
0 1 -8
0 1 -7
0 1 -6
0 1 -5
0 1 -4
0 1 -3
0 1 -2
0 1 -1
0 1 0
0 1 1
0 1 2
0 1 3
0 1 4
0 1 5
0 1 6
0 1 7
0 1 8
0 1 9
0 1 10
SVG Filter animation feColorMatrix
I'm trying to make a hover effect on an image using SVF filters. My problem is that I don't know how to make the effect to last. I can give 1 second of duration but I can't keep the values of the feColorMatrix as I want. <filter id="blurred" color-interpolation-filters="sRGB" x="0%" y="0%" height="10%" width="10%"> <feColorMatrix result="wispy" type="matrix" values="8 0 0 0 -1 4 0 4 3 -1 4 0 0 0 -1 1 0 0 0 0"> <animate attributeType="XML" id="blurredAnimation" attributeName="values" from="8 0 0 0 -1 4 0 4 3 -1 4 0 0 0 -1 1 0 0 0 0" to="3 0 0 0 -1 4 0 4 3 -1 4 0 0 0 -1 1 0 0 0 0" dur="1s" values = "8 0 0 0 -1 4 0 4 3 -1 4 0 0 0 -1 1 0 0 0 0;3 0 0 0 -1 4 0 4 3 -1 4 0 0 0 -1 1 0 0 0 0;" keyTimes = "0;1" begin="indefinite" /> </feColorMatrix> </filter> I want the green effect to stay there as long as the hover is there. Thank you Here is the jsFiddle
If you add fill="freeze" the animation will stay like it is once it's finished. You may want to add something to reset the animation on mouseout too.
function toggleBlurOff(background) {
document.getElementById("svg").setCurrentTime(0);
};