PaperJS: Exporting then Importing an SVG creates extra data (clippath) - paperjs

I have a drawing tool that needs to be able to export, store and then import a drawing. I am using the following code for exporting:
const savedData = scope.project.exportSVG({
asString: true,
bounds: scope.view.bounds
});
Here is the code for importing:
scope.project.importSVG(savedData);
If I draw a simple line, console what is imported (the line I just drew), and console what is exported I SHOULD get the same result. Instead this is what I get:
Import:
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1422"
height="498"
viewBox="0,0,1422,498"
>
<g
fill="none"
fill-rule="nonzero"
stroke="#990000"
stroke-width="3"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="10"
stroke-dasharray=""
stroke-dashoffset="0"
font-family="none"
font-weight="none"
font-size="none"
text-anchor="none"
style="mix-blend-mode: normal"
>
<path
d="M426,41l4,5l4,7l4,5l2,4l3,6l3,5l3,4l2,4l3,3l1,4l1,1l1,4l2,2l1,2l2,4l1,1l1,3l2,2l1,1v1"
style="mix-blend-mode: destination-over"
/>
</g>
</svg>
Export:
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1422"
height="498"
viewBox="0,0,1422,498"
>
<defs>
<clipPath id="clip-1">
<rect
x="0"
y="0"
width="1422"
height="498"
stroke="none"
stroke-width="1"
/>
</clipPath>
</defs>
<g
fill="none"
fill-rule="nonzero"
stroke="none"
stroke-width="none"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="10"
stroke-dasharray=""
stroke-dashoffset="0"
font-family="none"
font-weight="none"
font-size="none"
text-anchor="none"
style="mix-blend-mode: normal"
>
<g clip-path="url(#clip-1)">
<g stroke="#990000" stroke-width="3">
<path
d="M426,41l4,5l4,7l4,5l2,4l3,6l3,5l3,4l2,4l3,3l1,4l1,1l1,4l2,2l1,2l2,4l1,1l1,3l2,2l1,1v1"
/>
</g>
</g>
</g>
</svg>
The defs and clippath are causing layering issues when adding more to the loaded drawing. Why is it converting my svg this way? Where is that clippath coming from? Is there a property I am missing?

Related

How to use svg image with svg tag

Hello I would like to know if it is possible to use my svg image in a svg tag in html
my image.svg cde:
<svg viewBox="0 0 58 58" style="enable-background:new 0 0 58 58;" xml:space="preserve">
<g>
<path style="fill:#FCD3EE;" d="M44,18.394v21.141c0,2.722-2.207,4.929-4.929,4.929L22,44.535l-10,11v-11H4.929
C2.207,44.535,0,42.328,0,39.606l0-21.141c0-2.722,2.207-4.929,4.929-4.929l34.141-0.071C41.793,13.465,44,15.672,44,18.394z" />
<path style="fill:#FFFFFF;" d="M22,24.465H9c-0.553,0-1-0.448-1-1s0.447-1,1-1h13c0.553,0,1,0.448,1,1S22.553,24.465,22,24.465z" />
<path style="fill:#FFFFFF;" d="M35,30.465H9c-0.553,0-1-0.448-1-1s0.447-1,1-1h26c0.553,0,1,0.448,1,1S35.553,30.465,35,30.465z" />
<path style="fill:#FFFFFF;" d="M35,36.465H9c-0.553,0-1-0.448-1-1s0.447-1,1-1h26c0.553,0,1,0.448,1,1S35.553,36.465,35,36.465z" />
<path style="fill:#8950FC;" d="M53.071,2.535l-34.141-0.07C16.207,2.465,14,4.672,14,7.394v6.122l25.071-0.052
c2.722,0,4.929,2.207,4.929,4.93v18.441l7,7.7v-11h2.071c2.722,0,4.929-2.207,4.929-4.929V7.465
C58,4.742,55.793,2.535,53.071,2.535z" />
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
I'm currently using it as an image but I need to apply css to my svg and I don't know how to add it as an svg tag
i use with tag image on reactjs:
<img src={Chat} />
but i want < svg > tag for apply css
There are multiple ways how to do this, the simplest one (without any configuration) is to turn it into a React component:
import React from 'react';
export default () => {
return (
<svg viewBox="0 0 58 58" style={{'enable-background': 'new 0 0 58 58'}}>
<g>
<path style={{fill: '#FCD3EE'}} d="M44,18.394v21.141c0,2.722-2.207,4.929-4.929,4.929L22,44.535l-10,11v-11H4.929
C2.207,44.535,0,42.328,0,39.606l0-21.141c0-2.722,2.207-4.929,4.929-4.929l34.141-0.071C41.793,13.465,44,15.672,44,18.394z"/>
<path style={{fill: '#FFFFFF'}}
d="M22,24.465H9c-0.553,0-1-0.448-1-1s0.447-1,1-1h13c0.553,0,1,0.448,1,1S22.553,24.465,22,24.465z"/>
<path style={{fill: '#FFFFFF'}}
d="M35,30.465H9c-0.553,0-1-0.448-1-1s0.447-1,1-1h26c0.553,0,1,0.448,1,1S35.553,30.465,35,30.465z"/>
<path style={{fill: '#FFFFFF'}}
d="M35,36.465H9c-0.553,0-1-0.448-1-1s0.447-1,1-1h26c0.553,0,1,0.448,1,1S35.553,36.465,35,36.465z"/>
<path style={{fill: '#8950FC'}} d="M53.071,2.535l-34.141-0.07C16.207,2.465,14,4.672,14,7.394v6.122l25.071-0.052
c2.722,0,4.929,2.207,4.929,4.93v18.441l7,7.7v-11h2.071c2.722,0,4.929-2.207,4.929-4.929V7.465
C58,4.742,55.793,2.535,53.071,2.535z"/>
</g>
</svg>
);
};

Material SVGs exported from sketch not showing up in client's browser, but fine in my browser - how to test?

I'm assuming it's an export issue. Trying to figure out how to recreate the issue - any one experience this? Solutions also welcome. Will try re-exporting from Illustrator.
here are some troublesome SVGs (material icons):
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="19px" viewBox="0 0 18 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="R02" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="material" font-size="24" font-weight="normal">
<g id="Live-Event-03---Account-Menu" transform="translate(-1160.000000, -158.000000)" fill="#98A4AE">
<g id="menu" transform="translate(1124.000000, 56.000000)">
<g id="item" transform="translate(33.000000, 100.000000)">
<text id="exit_to_app---material">
<tspan x="0" y="20"></tspan>
</text>
</g>
</g>
</g>
</g>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="27px" height="23px" viewBox="0 0 27 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>send - material</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="R02" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="material" font-size="30" font-weight="normal">
<g id="Modal-05---Share" transform="translate(-477.000000, -395.000000)" fill="#98A4AE">
<g id="modal" transform="translate(435.000000, 376.000000)">
<g id="header">
<text id="send---material">
<tspan x="40" y="41"></tspan>
</text>
</g>
</g>
</g>
</g>
Here is a SVG that was viewed correctly (custom):
<?xml version="1.0" encoding="UTF-8"?>
<svg width="56px" height="56px" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="icon/account-white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M28,45.256 C30.8373475,45.256 33.5066542,44.5466738 36.008,43.128 C38.4346788,41.8213268 40.4319922,40.0106782 42,37.696 C41.9626665,36.2773262 41.0853419,34.9706726 39.368,33.776 C37.8746592,32.767995 35.9706782,31.9466698 33.656,31.312 C31.5653229,30.7519972 29.6706752,30.472 27.972,30.472 C26.2733248,30.472 24.3786771,30.7519972 22.288,31.312 C19.9733218,31.9466698 18.0880073,32.767995 16.632,33.776 C14.9146581,34.9706726 14.0373335,36.2773262 14,37.696 C15.5680078,40.0106782 17.5653212,41.8213268 19.992,43.128 C22.5306794,44.5466738 25.199986,45.256 28,45.256 Z M28,12.104 C26.7679938,12.104 25.6106721,12.4213302 24.528,13.056 C23.4453279,13.6906698 22.5866698,14.5493279 21.952,15.632 C21.3173302,16.7146721 21,17.8719938 21,19.104 C21,20.3360062 21.3173302,21.4933279 21.952,22.576 C22.5866698,23.6586721 23.4453279,24.5173302 24.528,25.152 C25.6106721,25.7866698 26.7679938,26.104 28,26.104 C29.2320062,26.104 30.3893279,25.7866698 31.472,25.152 C32.5546721,24.5173302 33.4133302,23.6586721 34.048,22.576 C34.6826698,21.4933279 35,20.3360062 35,19.104 C35,17.8719938 34.6826698,16.7146721 34.048,15.632 C33.4133302,14.5493279 32.5546721,13.6906698 31.472,13.056 C30.3893279,12.4213302 29.2320062,12.104 28,12.104 Z M28,5.104 C32.2560213,5.104 36.1946486,6.16798936 39.816,8.296 C43.3253509,10.3120101 46.0879899,13.0746491 48.104,16.584 C50.2320106,20.2053514 51.296,24.1439787 51.296,28.4 C51.296,32.6560213 50.2320106,36.5946486 48.104,40.216 C46.0879899,43.7253509 43.3253509,46.4879899 39.816,48.504 C36.1946486,50.6320106 32.2560213,51.696 28,51.696 C23.7439787,51.696 19.8053514,50.6320106 16.184,48.504 C12.6746491,46.4506564 9.91201008,43.6693509 7.896,40.16 C5.76798936,36.5386486 4.704,32.6186878 4.704,28.4 C4.704,24.1813122 5.76798936,20.2613514 7.896,16.64 C9.9493436,13.1306491 12.7306491,10.3493436 16.24,8.296 C19.8613514,6.16798936 23.7813122,5.104 28,5.104 Z" id="account_circle---material" fill="#FFFFFF"></path>
</g>
The svgs had a lot of transforms going to and fro which I deleted. Also I could have eliminated some of the nested <g> elements, but maybe you putted them there for some reason.
Also in the CSS I've putted a border to the SVG so that you can see that there is a white space between the icon and the border of the svg canvas. Should it have been for me I would have eliminated that space, but again: you may need it. I hope this helps.
svg{border:1px solid}
<svg width="18px" height="19px" viewBox="0 2 18 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="R02" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="material" font-size="24" font-weight="normal">
<g id="Live-Event-03---Account-Menu" fill="#98A4AE">
<g id="menu">
<g id="item">
<text id="exit_to_app---material">
<tspan y="20"></tspan>
</text>
</g>
</g>
</g>
</g>
</svg>
<svg width="27px" height="23px" viewBox="0 20 27 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>send - material</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="R02" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="material" font-size="30" font-weight="normal">
<g id="Modal-05---Share" fill="#98A4AE">
<g id="modal" >
<g id="header">
<text id="send---material">
<tspan y="41"></tspan>
</text>
</g>
</g>
</g>
</g>
</svg>
<svg width="56px" height="56px" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="icon" stroke="black" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M28,45.256 C30.8373475,45.256 33.5066542,44.5466738 36.008,43.128 C38.4346788,41.8213268 40.4319922,40.0106782 42,37.696 C41.9626665,36.2773262 41.0853419,34.9706726 39.368,33.776 C37.8746592,32.767995 35.9706782,31.9466698 33.656,31.312 C31.5653229,30.7519972 29.6706752,30.472 27.972,30.472 C26.2733248,30.472 24.3786771,30.7519972 22.288,31.312 C19.9733218,31.9466698 18.0880073,32.767995 16.632,33.776 C14.9146581,34.9706726 14.0373335,36.2773262 14,37.696 C15.5680078,40.0106782 17.5653212,41.8213268 19.992,43.128 C22.5306794,44.5466738 25.199986,45.256 28,45.256 Z M28,12.104 C26.7679938,12.104 25.6106721,12.4213302 24.528,13.056 C23.4453279,13.6906698 22.5866698,14.5493279 21.952,15.632 C21.3173302,16.7146721 21,17.8719938 21,19.104 C21,20.3360062 21.3173302,21.4933279 21.952,22.576 C22.5866698,23.6586721 23.4453279,24.5173302 24.528,25.152 C25.6106721,25.7866698 26.7679938,26.104 28,26.104 C29.2320062,26.104 30.3893279,25.7866698 31.472,25.152 C32.5546721,24.5173302 33.4133302,23.6586721 34.048,22.576 C34.6826698,21.4933279 35,20.3360062 35,19.104 C35,17.8719938 34.6826698,16.7146721 34.048,15.632 C33.4133302,14.5493279 32.5546721,13.6906698 31.472,13.056 C30.3893279,12.4213302 29.2320062,12.104 28,12.104 Z M28,5.104 C32.2560213,5.104 36.1946486,6.16798936 39.816,8.296 C43.3253509,10.3120101 46.0879899,13.0746491 48.104,16.584 C50.2320106,20.2053514 51.296,24.1439787 51.296,28.4 C51.296,32.6560213 50.2320106,36.5946486 48.104,40.216 C46.0879899,43.7253509 43.3253509,46.4879899 39.816,48.504 C36.1946486,50.6320106 32.2560213,51.696 28,51.696 C23.7439787,51.696 19.8053514,50.6320106 16.184,48.504 C12.6746491,46.4506564 9.91201008,43.6693509 7.896,40.16 C5.76798936,36.5386486 4.704,32.6186878 4.704,28.4 C4.704,24.1813122 5.76798936,20.2613514 7.896,16.64 C9.9493436,13.1306491 12.7306491,10.3493436 16.24,8.296 C19.8613514,6.16798936 23.7813122,5.104 28,5.104 Z" id="account_circle---material" fill="#FFFFFF"></path>
</g>
</svg>
In the end, we were able to solve the issue by exporting through Illustrator. Here is how the newly exported SVG code looked:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><defs><style>.a{fill:#98a4ae;}</style></defs><title>sign-out-gray</title><path class="a" d="M44.2964,7a4.5218,4.5218,0,0,1,3.3027,1.4A4.52,4.52,0,0,1,49,11.7036V44.2964a4.7835,4.7835,0,0,1-4.7031,4.7041H11.7041a4.4923,4.4923,0,0,1-3.332-1.4A4.5585,4.5585,0,0,1,7,44.2964V35h4.7041v9.2969H44.2964V11.7036H11.7041V21H7V11.7036A4.5629,4.5629,0,0,1,8.3721,8.3994,4.4919,4.4919,0,0,1,11.7041,7ZM23.52,36.4l5.9922-6.1045H7V25.7036H29.5122L23.52,19.6l3.3042-3.3042L38.5278,28,26.8242,39.7036Z"/></svg>

svg fill background image fit to the screen?

I am adding SVG fill with a background image. But it is not fit the image properly. It is looking like my screenshot http://take.ms/8cloN
<svg width="897px" height="452px" viewBox="0 0 897 452" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.0.4 (8054) - http://www.bohemiancoding.com/sketch -->
<title>IPAD 2</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%" >
<image xlink:href="https://images.unsplash.com/photo-1534002778889-3f1b078de59b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a2e808d0d3560da6d4845fe7e7bfc19d&auto=format&fit=crop&w=750&q=80" x="0" y="0" />
</pattern>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="IPAD" sketch:type="MSLayerGroup" transform="translate(681.000000, 55.000000)" stroke="#7E89A3">
<path d="M202.986,317 L12.097,317 C5.462,317 0.083,311.623 0.083,304.99 L0.083,12.093 C0.083,5.46 5.461,0.083 12.097,0.083 L202.986,0.083 C209.622,0.083 215,5.46 215,12.093 L215,304.99 C215,311.623 209.622,317 202.986,317 Z" id="bezel" stroke-width="2" fill="#FDFDFD" sketch:type="MSShapeGroup"></path>
<path d="M202.986,317 L12.097,317 C5.462,317 0.083,311.623 0.083,304.99 L0.083,12.093 C0.083,5.46 5.461,0.083 12.097,0.083 L202.986,0.083 C209.622,0.083 215,5.46 215,12.093 L215,304.99 C215,311.623 209.622,317 202.986,317 Z" id="bezel-2" stroke-width="2" fill="#FDFDFD" sketch:type="MSShapeGroup"></path>
<rect id="screen" fill="url(#img1)" sketch:type="MSShapeGroup" x="17" y="32" width="181.999" height="252.917"></rect>
<circle id="lock" sketch:type="MSShapeGroup" cx="108.021" cy="300.021" r="8.021"></circle>
<circle id="camera" sketch:type="MSShapeGroup" cx="106.99" cy="16.99" r="2.99"></circle>
</g>
<g id="Laptop" sketch:type="MSLayerGroup" transform="translate(1.000000, 1.000000)" stroke="#8492A5">
<path d="M594,0 L98,0 C84.50415,0 73,11.0738184 73,24.7901127 L73,351.027995 L619,351.027985 L619,24.7901127 C618.999971,11.0728209 607.537479,0 594,0 Z" id="bezel" stroke-width="2" fill="#FEFEFE" sketch:type="MSShapeGroup"></path>
<circle id="webcam" stroke-width="2" sketch:type="MSShapeGroup" cx="347" cy="19" r="4"></circle>
<g id="bottom" transform="translate(0.000000, 351.000000)" sketch:type="MSShapeGroup">
<path d="M640.812,31.01 L51.288,31.01 C20.641,31.01 0,20.494 0,16.022 L0,2.428 C0,1.084 1.335,0 2.995,0 L689.104,0 C690.766,0 692.103,1.084 692.103,2.428 L692.103,16.557 C692.096,20.092 676.112,31.01 640.812,31.01 Z" id="Shape" stroke-width="2" fill="#FDFDFD"></path>
<path d="M0.5,14.5 L690.242676,14.5" id="Line" stroke-linecap="square"></path>
</g>
<rect id="screen" fill="url(#img1)" sketch:type="MSShapeGroup" x="95" y="39" width="501.073853" height="292.009"></rect>
<path d="M421,352 L421,355.087 C421,357.288 416.666719,357.952714 413.386719,357.952714 L278.815286,357.952714 C275.364286,357.952714 271,357.289 271,355.087 L271,352" id="touchpad" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
</g>
<g id="iphone" sketch:type="MSLayerGroup" transform="translate(576.000000, 177.000000)" stroke="#7E89A3">
<path d="M130,257.964 C130,266.797 122.809,273.956 113.938,273.956 L16.063,273.956 C7.192,273.956 0.001,266.797 0.001,257.964 L0.001,16.073 C0.001,7.24 7.192,0.081 16.063,0.081 L113.938,0.081 C122.809,0.081 130,7.24 130,16.073 L130,257.964 L130,257.964 Z" id="bezel" stroke-width="2" fill="#FDFDFD" sketch:type="MSShapeGroup"></path>
<rect id="screen" fill="url(#img1)" sketch:type="MSShapeGroup" x="9" y="36" width="111.93" height="199.084"></rect>
<path d="M77,25.746 C77,26.381 76.561,26.893 76.02,26.893 L55.918,26.893 C55.376,26.893 54.938,26.38 54.938,25.746 L54.938,23.166 C54.938,22.531 55.377,22.019 55.918,22.019 L76.02,22.019 C76.561,22.019 77,22.532 77,23.166 L77,25.746 L77,25.746 Z" id="speaker" sketch:type="MSShapeGroup"></path>
<circle id="camera" sketch:type="MSShapeGroup" cx="66" cy="12" r="3"></circle>
<ellipse id="lock" sketch:type="MSShapeGroup" cx="65.04" cy="254.001" rx="10.04" ry="10.001"></ellipse>
</g>
</g>
</svg>
I want it like my screenshot http://take.ms/ViaOB is it possible?
In your pattern tag, replace patternUnits="userSpaceOnUse" with patternContentUnits="objectBoundingBox". Then add height="1" width="1" preserveAspectRatio="none" to the image tag inside your pattern tag. Like this:
<pattern id="img1" id="pattern1" patternContentUnits="objectBoundingBox" width="100%" height="100%" >
<image height="1" width="1" preserveAspectRatio="none" xlink:href="https://images.unsplash.com/photo-1534002778889-3f1b078de59b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a2e808d0d3560da6d4845fe7e7bfc19d&auto=format&fit=crop&w=750&q=80" x="0" y="0" />
</pattern>

SVG blurry when resizing

I am using an svg from FlatIcons, When I import it and dont mess with the height/width it looks fine (but is too big) but when I start to reduce its size the borders become blurry and are no longer sharp.
e.g. https://codepen.io/geraintf/pen/ZoaPPW
What is going on? How can I scale an SVG to avoid this?
The SVG:
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 52.966 52.966" style="enable-background:new 0 0 52.966 52.966;" xml:space="preserve">
<path d="M51.704,51.273L36.845,35.82c3.79-3.801,6.138-9.041,6.138-14.82c0-11.58-9.42-21-21-21s-21,9.42-21,21s9.42,21,21,21
c5.083,0,9.748-1.817,13.384-4.832l14.895,15.491c0.196,0.205,0.458,0.307,0.721,0.307c0.25,0,0.499-0.093,0.693-0.279
C52.074,52.304,52.086,51.671,51.704,51.273z M21.983,40c-10.477,0-19-8.523-19-19s8.523-19,19-19s19,8.523,19,19
S32.459,40,21.983,40z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

shadow in svg on hover

I don't see what I'm doing wrong, so perhaps someone else will!
Here goes: I've made a Facebook button in svg. When I hover over the button I would like it to "sink into the background" using a inline shadow.
Here is the svg:
<svg 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 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFE06B;}
.st1{fill:#F7C411;}
.st2{fill:#FF9900;}
g#shadow {display:none;}
g#shadow:hover {display:block;}
</style>
<g id="layer_1">
<circle class="st0" cx="200" cy="200" r="200"/>
</g>
<g id="shadow">
<path class="st1" d="M4,204C4,93.543,93.543,4,204,4c54.211,0,103.375,21.578,139.398,56.602C307.059,23.228,256.246,0,200,0
C89.543,0,0,89.543,0,200c0,56.245,23.227,107.058,60.602,143.397C25.578,307.374,4,258.211,4,204z"/>
<g>
<path class="st1" d="M246.379,103.232v33.333h-18.138c-5.393,0-8.823,1.471-10.539,4.412c-1.226,1.961-1.716,5.392-1.716,10.049
v15.196h30.883l-3.677,33.579h-27.206v96.815h-39.952v-96.815h-19.608v-33.579h19.608v-20.099
c0-20.588,7.108-33.824,21.079-39.461c6.863-2.696,12.745-3.431,18.873-3.431H246.379z"/>
</g>
</g>
<g id="layer_3">
<g>
<path class="st2" d="M242.524,99.145v33.333h-18.138c-5.393,0-8.823,1.471-10.539,4.412c-1.226,1.961-1.716,5.392-1.716,10.049
v15.196h30.883l-3.677,33.579h-27.206v96.815H172.18v-96.815h-19.608v-33.579h19.608v-20.099c0-20.588,7.108-33.824,21.079-39.461
c6.863-2.696,12.746-3.431,18.874-3.431H242.524z"/>
</g>
</g>
</svg>
The group with ID "shadow" should display when I hover over it, but it doesn't. Who sees my mistake?
Thanx,
Thom
The shadow elements are display:none and are therefore not rendered. There's nothing there to hover over.
This turns on the shadow when you hover anywhere over the button, assuming that's what you want to achieve. There's an additional hidden circle to catch all the events and the foreground is pointer-events: none so it doesn't interfere with the catching of the hover events.
<svg 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 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFE06B;}
.st1{fill:#F7C411;}
.st2{fill:#FF9900;}
g#shadow {visibility:hidden;pointer-events:all}
g#shadow:hover {visibility:visible;}
</style>
<g id="layer_1">
<circle class="st0" cx="200" cy="200" r="200"/>
</g>
<g id="shadow">
<path class="st1" d="M4,204C4,93.543,93.543,4,204,4c54.211,0,103.375,21.578,139.398,56.602C307.059,23.228,256.246,0,200,0
C89.543,0,0,89.543,0,200c0,56.245,23.227,107.058,60.602,143.397C25.578,307.374,4,258.211,4,204z"/>
<g>
<path class="st1" d="M246.379,103.232v33.333h-18.138c-5.393,0-8.823,1.471-10.539,4.412c-1.226,1.961-1.716,5.392-1.716,10.049
v15.196h30.883l-3.677,33.579h-27.206v96.815h-39.952v-96.815h-19.608v-33.579h19.608v-20.099
c0-20.588,7.108-33.824,21.079-39.461c6.863-2.696,12.745-3.431,18.873-3.431H246.379z"/>
</g>
<circle visibility="hidden" cx="200" cy="200" r="200"/>
</g>
<g id="layer_3" pointer-events="none">
<g>
<path class="st2" d="M242.524,99.145v33.333h-18.138c-5.393,0-8.823,1.471-10.539,4.412c-1.226,1.961-1.716,5.392-1.716,10.049
v15.196h30.883l-3.677,33.579h-27.206v96.815H172.18v-96.815h-19.608v-33.579h19.608v-20.099c0-20.588,7.108-33.824,21.079-39.461
c6.863-2.696,12.746-3.431,18.874-3.431H242.524z"/>
</g>
</g>
</svg>

Resources