Related
This question already has an answer here:
svg animateMotion is offset from path
(1 answer)
Closed 2 years ago.
I am trying t create a simple SVG animation(using SMIL) and I can't seem to figure out why the orb isn't following the arc, instead the orb it is at the bottom of the page.
Here is my code:
<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"
viewBox="0 0 1240 768" style="enable-background:new 0 0 1240 768;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#0FBA70;}
</style>
<animateMotion xlink:href="#orb" dur="10s" begin="0s" fill="freeze" repeatCount="indefinite">
<mpath xlink:href="#motionPath" />
</animateMotion>
<g>
<polygon class="st0" points="389.5,405.5 394,405.5 926.8,400.5 930.5,400.5 "/>
<path id="motionPath" d="M390.9,407.5l-2.9-4.1C426,377,625,248.9,820.4,327.2c40.5,16.2,78.1,40.3,111.8,71.5l-3.4,3.7
c-33.2-30.8-70.3-54.5-110.2-70.5C625.5,254.5,428.5,381.3,390.9,407.5z"/>
</g>
<g>
<circle id="orb" class="st1" cx="389.5" cy="400.5" r="56.5"/>
</g>
</svg>
The orb is currently being offset with the cx and cy values:
<circle id="orb" class="st1" cx="389.5" cy="400.5" r="56.5"/>
If you remove those values, the orb follows the path:
<circle id="orb" class="st1" r="56.5"/>
See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion for a working example, and if you open that in JSFiddle or Codepen and add a cx or cy value you will observe the same behavior (circle is animating offset from the path).
.st0 {
fill: #FFFFFF;
}
.st1 {
fill: #0FBA70;
}
<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" viewBox="0 0 1240 768" style="enable-background:new 0 0 1240 768;" xml:space="preserve">
<animateMotion xlink:href="#orb" dur="10s" begin="0s" fill="freeze" repeatCount="indefinite">
<mpath xlink:href="#motionPath" />
</animateMotion>
<g>
<polygon class="st0" points="389.5,405.5 394,405.5 926.8,400.5 930.5,400.5 "/>
<path id="motionPath" d="M390.9,407.5l-2.9-4.1C426,377,625,248.9,820.4,327.2c40.5,16.2,78.1,40.3,111.8,71.5l-3.4,3.7
c-33.2-30.8-70.3-54.5-110.2-70.5C625.5,254.5,428.5,381.3,390.9,407.5z"/>
</g>
<g>
<circle id="orb" class="st1" r="56.5"/>
</g>
</svg>
I have the following SVG file
<svg width="523" height="524" style='background-color: teal;' xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-ec2d25d9" viewBox="0 0 60 30">
<g stroke="#000" fill="#fff">
<path d="M0 0h60v60H0z" fill="#FFF"/>
<path d="M0 0l30 37.1v-18l30 37.2" fill="none"/>
</g>
<g>
<path fill="none" d="M-1-1h583v403H-1z"/>
</g>
</symbol>
<path d="M85 84 127 84 127 126 85 126 "/>
<use href="#icon-ec2d25d9" x="85" y="84" width="22" height="36" fill="none" stroke="black" class="icon 4"/>
</svg>
(https://jsfiddle.net/L5xz73j4/) and I would like to modify the dimensions of the small icon inside the black rectangle to match the width and height of the rectangle. I'm generating these kinds of SVG's on the fly so I cannot start playing with the width and height attributes by hand. My question is that can I use the path element of the black rectangle to achieve this or what's the appropriate way?
I've changed the viewBox of the symbol to viewBox="0 0 60 60" acording to the size of the group inside. Now the symbol is square. In order to make the use fill the black square I've changed the width and the height of the use to width="42" height="42" i.e, the size of the black square.
I hope this is what you are asking
<svg width="523" height="524" style='background-color: teal;' xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-ec2d25d9" viewBox="0 0 60 60">
<g stroke="#000" fill="#fff">
<path d="M0 0h60v60H0z"/>
<path d="M0 0l30 37.1v-18l30 37.2" fill="none"/>
</g>
<!--<g><path fill="none" d="M-1-1h583v403H-1z"/></g>-->
</symbol>
<path d="M85 84 127 84 127 126 85 126 " />
<use href="#icon-ec2d25d9" x="85" y="84" width="42" height="42" fill="none" stroke="black" class="icon 4"/>
</svg>
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>
Im currently working on a map for a Elections website The map is SVG and we need the map to be able to use stripes in 2 different colours depending on the election results.
as the results are announced the map will colour the areas i.e Red = labour for that elected area but in our case a area can have 2 Party's so we would need the map to display stripes red/blue to that area to show users the results.
Does anybody have any idea how this can be achieved?
one idea was to use the Fill colour option and overlay & image that's 50% fill colour and the other 50% transparent showing the background fill behind it , however we couldn't get the both to show
Below i have attached the code used for the map
<svg version="1.1"
id="svg5136" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:svg="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" inkscape:version="0.91 r13725" sodipodi:docname="close_up_02.svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="350px"
height="350px" viewBox="0 0 660.811 535.805" enable-background="new 0 0 660.811 535.805" xml:space="preserve">
<g id="g5144" transform="matrix(1.25,0,0,-1.25,-188.59631,638.40215)" inkscape:label="ElectSuf Mapbse nl" inkscape:groupmode="layer">
<path id="path6049" inkscape:connector-curvature="0" fill="#FFFFFF" stroke="#000000" stroke-width="2.24" d="M289.6,296
l-15.2,10.4l1.6,10.4l0.8,16l3.2,10.4l8,14.4l6.4,12.8l2.4,11.2l3.2,1.6l16,17.6l-3.2,3.2l7.2,3.2l0.8,4l20.8,17.6h3.2l12,10.4
l12.8,11.2l-2.4,12l4.8,3.2l4-2.4l4-10.4l-2.4-4l1.6-6.4l2.4-6.4l-0.8-6.4l0.8-7.2l12-14.4l7.2-6.4v-6.4l-0.8-6.4l-0.8-4.8l1.6-5.6
l13.6-0.8l-3.2-3.2l2.4-4l1.6-4.8v-4v-6.4l-6.4-0.8l-1.6-4.8l-1.6-4.8l-2.4-5.6l-4.8-2.4l-4-3.2l0.8-8.8l7.2-1.6l10.4-0.8l1.6-2.4
l12.8,4l-2.4-4l0.8-4l6.4-8l4.8-7.2l2.4-4l7.2-4l6.4-6.4l3.2-6.4l3.2-6.4l-1.6-5.6l-8.8-0.8l-4.8-2.4l-1.6-8L412,268l-11.2,5.6
l-2.4,5.6h-4.8l-4.8,1.6l-5.6-0.8l-4.8-0.8l-6.4-0.8l-4,9.6l-28-3.2l-10.4-2.4l-9.6,0.8l-3.2-2.4l-4.8-1.6L289.6,296z"/>
<path id="path6053" inkscape:connector-curvature="0" fill="#ffffff" stroke="#000000" stroke-width="2.24" d="M493.6,363.2l7.2-4
L560,360l-0.8-87.2l-4-2.4l-6.4-1.6l-24,4l-8.8,1.6l-18.4,2.4L484,280l-11.2,3.2l-5.6-12l-8-3.2l-0.8,5.6l-4,10.4l-6.4,8l-8.8,5.6
l-8.8,11.2l-5.6,8.8l2.4,8l-12-4.8l-3.2,2.4h-9.6l-5.6,1.6l-2.4,8.8l8.8,4.8l4.8,15.2l6.4,1.6l0.8,9.6l-0.8,4l-3.2,4.8l1.6,4.8
h-10.4l-4,6.4l0.8,9.6l6.4,1.6l4.8,3.2l0.8,2.4h5.6l11.2,5.6l8,2.4l1.6,8l10.4-14.4l10.4-12l13.6-9.6l18.4-8l3.2-3.2V363.2z"/>
</g>
</svg>
You probably need patterns, here's a snippet:
<svg version="1.1"
id="svg5136" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:svg="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" inkscape:version="0.91 r13725" sodipodi:docname="close_up_02.svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="350px"
height="350px" viewBox="0 0 660.811 535.805" enable-background="new 0 0 660.811 535.805" xml:space="preserve">
<defs>
<pattern id="red-blue" viewBox='0 0 1 1' x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x=0 y=0 width=1 height=1 fill='#f33' />
<path d='M0 0 L1 1' stroke=#55f stroke-width='.33' />
<path d='M0 -1 L2 1' stroke=#55f stroke-width='.33' />
<path d='M-1 0 L1 2' stroke=#55f stroke-width='.33' />
</pattern>
</defs>
<g id="g5144" transform="matrix(1.25,0,0,-1.25,-188.59631,638.40215)" inkscape:label="ElectSuf Mapbse nl" inkscape:groupmode="layer">
<path id="path6049" inkscape:connector-curvature="0" fill="url(#red-blue)" stroke="#000000" stroke-width="2.24" d="M289.6,296
l-15.2,10.4l1.6,10.4l0.8,16l3.2,10.4l8,14.4l6.4,12.8l2.4,11.2l3.2,1.6l16,17.6l-3.2,3.2l7.2,3.2l0.8,4l20.8,17.6h3.2l12,10.4
l12.8,11.2l-2.4,12l4.8,3.2l4-2.4l4-10.4l-2.4-4l1.6-6.4l2.4-6.4l-0.8-6.4l0.8-7.2l12-14.4l7.2-6.4v-6.4l-0.8-6.4l-0.8-4.8l1.6-5.6
l13.6-0.8l-3.2-3.2l2.4-4l1.6-4.8v-4v-6.4l-6.4-0.8l-1.6-4.8l-1.6-4.8l-2.4-5.6l-4.8-2.4l-4-3.2l0.8-8.8l7.2-1.6l10.4-0.8l1.6-2.4
l12.8,4l-2.4-4l0.8-4l6.4-8l4.8-7.2l2.4-4l7.2-4l6.4-6.4l3.2-6.4l3.2-6.4l-1.6-5.6l-8.8-0.8l-4.8-2.4l-1.6-8L412,268l-11.2,5.6
l-2.4,5.6h-4.8l-4.8,1.6l-5.6-0.8l-4.8-0.8l-6.4-0.8l-4,9.6l-28-3.2l-10.4-2.4l-9.6,0.8l-3.2-2.4l-4.8-1.6L289.6,296z"/>
<path id="path6053" inkscape:connector-curvature="0" fill="#ffffff" stroke="#000000" stroke-width="2.24" d="M493.6,363.2l7.2-4
L560,360l-0.8-87.2l-4-2.4l-6.4-1.6l-24,4l-8.8,1.6l-18.4,2.4L484,280l-11.2,3.2l-5.6-12l-8-3.2l-0.8,5.6l-4,10.4l-6.4,8l-8.8,5.6
l-8.8,11.2l-5.6,8.8l2.4,8l-12-4.8l-3.2,2.4h-9.6l-5.6,1.6l-2.4,8.8l8.8,4.8l4.8,15.2l6.4,1.6l0.8,9.6l-0.8,4l-3.2,4.8l1.6,4.8
h-10.4l-4,6.4l0.8,9.6l6.4,1.6l4.8,3.2l0.8,2.4h5.6l11.2,5.6l8,2.4l1.6,8l10.4-14.4l10.4-12l13.6-9.6l18.4-8l3.2-3.2V363.2z"/>
</g>
</svg>
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>