SVG element disappears after apply rotate animation - html

When I am adding
<animateTransform attributeType="xml" attributeName="transform"
type="rotate" from="360 8.4 9.5" to="0 8.4 9.5" dur="0.5s"
additive="sum" repeatCount="indefinite" />
to <g id="icon-border"> element disappears.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="65" height="65" viewBox="0 0 65 65">
<defs>
<filter id="Ellipse_320" x="0" y="0" width="65" height="65" filterUnits="userSpaceOnUse">
<feOffset input="SourceAlpha"/>
<feGaussianBlur stdDeviation="7.5" result="blur"/>
<feFlood flood-color="#dec652" flood-opacity="0.478"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
<style>
</style>
</defs>
<g id="Group_470" data-name="Group 470" transform="translate(-1646.5 -154.5)">
<g transform="matrix(1, 0, 0, 1, 1646.5, 154.5)" filter="url(#Ellipse_320)">
<circle id="Ellipse_320-2" data-name="Ellipse 320" cx="10" cy="10" r="10" transform="translate(22.5 22.5)" fill="#dec652"/>
</g>
<g id="icon-border" transform="translate(1666 174)" fill="none" stroke="#dec652" stroke-width="1" stroke-dasharray="10">
<circle cx="13" cy="13" r="13" stroke="none"/>
<circle cx="13" cy="13" r="12.5" fill="none"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 8.4 9.5" to="0 8.4 9.5" dur="0.5s" additive="sum" repeatCount="indefinite" />
</g>
<g id="text-change-accept-svgrepo-com" transform="translate(1673.811 182.551)">
<path id="Path_11" data-name="Path 11" d="M14.907,12A2.907,2.907,0,1,1,12,14.907,2.907,2.907,0,0,1,14.907,12Zm1.4,1.663-2.163,2.163-.61-.813a.264.264,0,1,0-.423.317l.793,1.057a.264.264,0,0,0,.4.028l2.378-2.378a.264.264,0,0,0-.374-.374Z" transform="translate(-6.715 -8.3)" fill="#fff"/>
<path id="Path_12" data-name="Path 12" d="M6.767,17H2.529l-.062,0a.529.529,0,0,0,.062,1.054h4.32a3.446,3.446,0,0,1-.092-.793Q6.757,17.131,6.767,17Z" transform="translate(-2 -10.657)" fill="#fff"/>
<path id="Path_13" data-name="Path 13" d="M7.02,14.057H2.529A.529.529,0,0,1,2.467,13l.062,0H7.713A3.439,3.439,0,0,0,7.02,14.057Z" transform="translate(-2 -8.772)" fill="#fff"/>
<path id="Path_14" data-name="Path 14" d="M2.529,10.057A.529.529,0,0,1,2.467,9l.062,0h9.514a.529.529,0,0,1,.062,1.054l-.062,0Z" transform="translate(-2 -6.886)" fill="#fff"/>
<path id="Path_15" data-name="Path 15" d="M12.042,5H2.529L2.467,5a.529.529,0,0,0,.062,1.054h9.514l.062,0A.529.529,0,0,0,12.042,5Z" transform="translate(-2 -5)" fill="#fff"/>
</g>
</g>
</svg>


It this more like it? I removed many of the transform/translate.
The animation on <g id="icon-border"> was fine. You just need to place the child circles in 0,0 and then transform/translate the <g> to the center.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" viewBox="0 0 65 65">
<defs>
<filter id="Ellipse_320" x="0" y="0" width="65" height="65" filterUnits="userSpaceOnUse">
<feOffset input="SourceAlpha"/>
<feGaussianBlur stdDeviation="7.5" result="blur"/>
<feFlood flood-color="#dec652" flood-opacity="0.478"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g id="Group_470" data-name="Group 470">
<circle id="Ellipse_320-2" data-name="Ellipse 320" filter="url(#Ellipse_320)" cx="32.5" cy="32.5" r="10" fill="#dec652"/>
<g id="icon-border" transform="translate(32.5 32.5)" fill="none" stroke="#dec652" stroke-width="1" stroke-dasharray="10">
<circle cx="0" cy="0" r="13" stroke="none"/>
<circle cx="0" cy="0" r="12.5"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360" to="0" dur="0.5s" additive="sum" repeatCount="indefinite" />
</g>
<g id="text-change-accept-svgrepo-com" transform="translate(27.5 28.5)">
<path id="Path_11" data-name="Path 11" d="M14.907,12A2.907,2.907,0,1,1,12,14.907,2.907,2.907,0,0,1,14.907,12Zm1.4,1.663-2.163,2.163-.61-.813a.264.264,0,1,0-.423.317l.793,1.057a.264.264,0,0,0,.4.028l2.378-2.378a.264.264,0,0,0-.374-.374Z" transform="translate(-6.715 -8.3)" fill="#fff"/>
<path id="Path_12" data-name="Path 12" d="M6.767,17H2.529l-.062,0a.529.529,0,0,0,.062,1.054h4.32a3.446,3.446,0,0,1-.092-.793Q6.757,17.131,6.767,17Z" transform="translate(-2 -10.657)" fill="#fff"/>
<path id="Path_13" data-name="Path 13" d="M7.02,14.057H2.529A.529.529,0,0,1,2.467,13l.062,0H7.713A3.439,3.439,0,0,0,7.02,14.057Z" transform="translate(-2 -8.772)" fill="#fff"/>
<path id="Path_14" data-name="Path 14" d="M2.529,10.057A.529.529,0,0,1,2.467,9l.062,0h9.514a.529.529,0,0,1,.062,1.054l-.062,0Z" transform="translate(-2 -6.886)" fill="#fff"/>
<path id="Path_15" data-name="Path 15" d="M12.042,5H2.529L2.467,5a.529.529,0,0,0,.062,1.054h9.514l.062,0A.529.529,0,0,0,12.042,5Z" transform="translate(-2 -5)" fill="#fff"/>
</g>
</g>
</svg>

Related

SVG image at page load animation does not start from initial position

I made this Avatar image with SVG and added animation to it, the circle clips the man path but at page load it shows the path then it jumps to animation. How do I keep it so that it would not show the path until animation begins
<svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="25 70 160 160">
<defs>
<clipPath id="a">
<circle cx="105" cy="149" r="69"></circle>
</clipPath>
</defs>
<circle cx="105" cy="149" r="69" fill="#999" stroke="#848080" stroke-linecap="square" stroke-linejoin="round" stroke-width="3"></circle>
<g clip-path="url(#a)">
<g>
<defs>
<clipPath id="b">
<ellipse cx="105" cy="149" rx="68" ry="68"></ellipse>
</clipPath>
</defs>
<path fill="#ccc" stroke="#e3e3e3" clip-path="url(#b)" stroke-linecap="square" stroke-linejoin="round" stroke-width="3" d="M137 137c0 18-14 32-31 32s-31-14-31-32 14-32 31-32 31 14 31 32zm-70 36c-13 0-17 12-17 24 0 13 4 21 17 21h76c13 0 17-9 17-21 0-13-4-24-17-24h-17a26 26 0 0 1-43 0z"></path>
<animateTransform attributeName="transform" type="translate" from="0 120" to="0 0" begin="0s" dur="1.5s"></animateTransform>
<animate attributeName="opacity" attributeType="XML" from="0" to="1" begin="0s" dur="1s"></animate>
</g>
</g>
</svg>

Set the opacity of the object to 0 at the start in markup and then move the animations so they are children of the element itself rather than animating the parent <g> element. That way the animation has sufficient specificity to override the element's properties.
<svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="25 70 160 160">
<defs>
<clipPath id="a">
<circle cx="105" cy="149" r="69"></circle>
</clipPath>
</defs>
<circle cx="105" cy="149" r="69" fill="#999" stroke="#848080" stroke-linecap="square" stroke-linejoin="round" stroke-width="3"></circle>
<g clip-path="url(#a)">
<g>
<defs>
<clipPath id="b">
<ellipse cx="105" cy="149" rx="68" ry="68"></ellipse>
</clipPath>
</defs>
<path fill="#ccc" stroke="#e3e3e3" clip-path="url(#b)" stroke-linecap="square" stroke-linejoin="round" stroke-width="3" d="M137 137c0 18-14 32-31 32s-31-14-31-32 14-32 31-32 31 14 31 32zm-70 36c-13 0-17 12-17 24 0 13 4 21 17 21h76c13 0 17-9 17-21 0-13-4-24-17-24h-17a26 26 0 0 1-43 0z" opacity="0">
<animateTransform attributeName="transform" type="translate" from="0 120" to="0 0" begin="0s" dur="1.5s"></animateTransform>
<animate attributeName="opacity" from="0" to="1" begin="0s" dur="1s" fill="freeze"></animate>
</path>
</g>
</g>
</svg>

How to create svg gradient with 3 points set out in a triangle that blend together

<svg id="color-gradient" width="400" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="50%" stop-color="blue" />
<stop offset="100%" stop-color="yellow"/>
</linearGradient>
</defs>
<circle cx="200" cy="200" r="100" fill="url(#gradient)"/>
</svg>
I want to create a svg gradient in a circle that has 3 points of color, set out in a triangle like this.
<svg id="color-gradient" width="400" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="50%" stop-color="blue" />
<stop offset="100%" stop-color="yellow"/>
</linearGradient>
</defs>
<circle cx="200" cy="200" r="100" fill="url(#gradient)"/>
</svg>
I have tried creating a linear Gradient with three stops, but I am not sure how to position the stops where I need them (top left right).

This is about as close as you can get.
svg {
width: 400px;
}
<svg viewBox="0 0 100 100">
<defs>
<filter id="blur" color-interpolation-filters="linear" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="9"/>
</filter>
<mask id="circle">
<circle cx="50" cy="50" r="50" fill="white"/>
</mask>
</defs>
<g mask="url(#circle)" filter="url(#blur)">
<rect x="-10" width="110" height="110" fill="blue"/>
<rect x="50" width="60" height="110" fill="yellow"/>
<polygon points="50,50, 60,110, 40,110" fill="#0f8"/>
<polygon points="0,0, 100,0, 100,20, 50,50, 0,20" fill="red"/>
<polygon points="0,10, 50,50, 0,30" fill="#f0f"/>
<polygon points="100,10, 100,30, 50,50" fill="#f80"/>
</g>
</svg>
Since the blending you get in CSS/SVG works purely by combining the red, green, and blue channels of RGB colours separately, it doesn't know that we expect to see green when we blend blue and yellow. Instead you just get a murky grey.
So in the example above, I "cheated" by adding slivers of the "correct" colours in between our three main colours. For example I put a sliver of green between the blue and yellow sectors.
If I don't do that, the above example would look like this:
svg {
width: 400px;
}
<svg viewBox="0 0 100 100">
<defs>
<filter id="blur" color-interpolation-filters="linear" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="7"/>
</filter>
<mask id="circle">
<circle cx="50" cy="50" r="50" fill="white"/>
</mask>
</defs>
<g mask="url(#circle)" filter="url(#blur)">
<rect x="-10" width="110" height="110" fill="blue"/>
<rect x="50" width="60" height="110" fill="yellow"/>
<polygon points="0,0, 100,0, 100,20, 50,50, 0,20" fill="red"/>
</g>
</svg>

This topic is inspired by the answer #Paul LeBeau
The author of the question did not ask a question on animation. But I think that the options will be useful to someone.
Gradient rotation
An animation command is added for a group of elements:
circle cx="50" cy="50" r="5" fill="white" stroke="silver">
<animateTransform attributeName="transform" type="rotate" xlink:href="#gr1" dur="2s" values="0 50 50;360 50 50" repeatcount="indefinite"/>
</circle>
<style>
svg {
width: 400px;
}
</style>
<svg viewBox="0 0 100 100">
<defs>
<filter id="blur" color-interpolation-filters="linear" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
</filter>
<mask id="circle">
<circle cx="50" cy="50" r="50" fill="white">
</circle>
</mask>
</defs>
<g id="gr1" mask="url(#circle)" filter="url(#blur)">
<rect x="-10" width="110" height="110" fill="blue"/>
<rect x="50" width="60" height="110" fill="yellow"/>
<polygon points="50,50, 60,110, 40,110" fill="#0f8"/>
<polygon points="0,0, 100,0, 100,20, 50,50, 0,20" fill="red"/>
<polygon points="0,10, 50,50, 0,30" fill="#f0f"/>
<polygon points="100,10, 100,30, 50,50" fill="#f80"/>
</g>
<circle cx="50" cy="50" r="5" fill="white" stroke="silver">
<animateTransform attributeName="transform" type="rotate" xlink:href="#gr1" dur="2s" values="0 50 50;360 50 50" repeatcount="indefinite"/>
</circle>
</svg>
Animation tracks
The command of animation of the radius of circles is added.
<circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" >
<animate id="an1" attributeName="r" values="5;50" dur="2s" begin="0s" repeatcount="indefinite" />
</circle>
<style>
svg {
width: 400px;
}
</style>
<svg viewBox="0 0 100 100">
<defs>
<filter id="blur" color-interpolation-filters="linear" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
</filter>
<mask id="circle">
<circle cx="50" cy="50" r="50" fill="white">
</circle>
</mask>
</defs>
<g id="gr1" mask="url(#circle)" filter="url(#blur)">
<rect x="-10" width="110" height="110" fill="blue"/>
<rect x="50" width="60" height="110" fill="yellow"/>
<polygon points="50,50, 60,110, 40,110" fill="#0f8"/>
<polygon points="0,0, 100,0, 100,20, 50,50, 0,20" fill="red"/>
<polygon points="0,10, 50,50, 0,30" fill="#f0f"/>
<polygon points="100,10, 100,30, 50,50" fill="#f80"/>
</g>
<circle cx="50" cy="50" r="5" fill="white" stroke="silver">
<animateTransform attributeName="transform" type="rotate" xlink:href="#gr1" dur="2s" values="0 50 50;360 50 50" repeatcount="indefinite"/>
</circle>
<circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" >
<animate id="an1" attributeName="r" values="5;50" dur="2s" begin="0s" repeatcount="indefinite" />
</circle>
<circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" >
<animate id="an2" attributeName="r" values="5;50" dur="2s" begin="0.5s" repeatcount="indefinite" />
</circle>
<circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" >
<animate id="an3" attributeName="r" values="5;50" dur="2s" begin="1s" repeatcount="indefinite" />
</circle>
<circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" >
<animate id="an3" attributeName="r" values="5;50" dur="2s" begin="1.5s" repeatcount="indefinite" />
</circle>
<circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" >
<animate id="an3" attributeName="r" values="5;50" dur="2s" begin="2s" repeatcount="indefinite" />
</circle>
</svg>

i wanted to give it a try, too.
the result is very different depending on the browser, firefox for example doesn't produce a very good result. (although that is also true for the other solutions, I think)
but it doesn't need the manually inserted composite colors and produces a very homogeneous effect on Safari and Chrome…
<svg viewBox="0 0 100 100">
<defs>
<filter id="colorblend">
<feColorMatrix in="SourceGraphic" result="red" type="matrix" values="
1 0 0 0 0
0 0 0 0 0
0 0 0 0 0
1 0 0 0 0" />
<feColorMatrix in="SourceGraphic" result="green" type="matrix" values="
0 0 0 0 0
0 1 0 0 0
0 0 0 0 0
0 1 0 0 0" />
<feColorMatrix in="SourceGraphic" result="blue" type="matrix" values="
0 0 0 0 0
0 0 0 0 0
0 0 1 0 0
0 0 1 0 0" />
<feGaussianBlur in="red" stdDeviation="20" result="red" />
<feGaussianBlur in="green" stdDeviation="20" result="green" />
<feGaussianBlur in="blue" stdDeviation="20" result="blue" />
<feBlend mode="screen" in="red" in2="green" result="redplusgreen" />
<feBlend mode="screen" in="redplusgreen" in2="blue" result="rainbow" />
<!--fix alpha -->
<feColorMatrix in="rainbow" result="rainbow" type="matrix" values="
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 20 0" />
<!-- increase brightness -->
<feBlend in="rainbow" in2="rainbow" mode="screen" result="rainbow" />
<!-- remove artefacts -->
<feGaussianBlur in="rainbow" stdDeviation="1" />
</filter>
<mask id="mask">
<circle cx="50" cy="50" r="50" fill="white"></circle>
</mask>
</defs>
<g mask="url(#mask)" filter="url(#colorblend)">
<rect x="-10" width="110" height="110" fill="red" />
<rect x="50" width="60" height="110" fill="lime" />
<polygon points="0,0, 100,0, 100,30, 50,50, 0,30" fill="blue" />
</g>
</svg>

SVG filter not work with marker-end in Firefox

I have following svg code works great in Chrome, but the marker did not show in Firefox. Is there someone know why? Thanks!
<svg id="exhibition_svg" width="1235" height="487" class="exhibitionSvg"
viewBox="-139.2135523613963,-60,806.4271047227926,318"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="bgPoint" width="800%" height="800%" x="-200%" y="-200%">
<feGaussianBlur stdDeviation="1" width="800%" height="800%" x="-300%"
y="-300%">
</feGaussianBlur>
</filter>
<marker id="app5end-arrow-active" viewBox="0 0 14 14" refX="7" refY="7"
markerWidth="3" markerHeight="3" orient="auto" filter="url(#bgPoint)">
<g>
<circle cx="7" cy="7" r="5" fill="#122C34" stroke="#3AD5C9" stroke-width="1">
</circle>
<circle cx="7" cy="7" r="2" fill="#122C34" stroke="#3AD5C9" stroke-width="2">
</circle>
</g>
</marker>
</defs>
<g>
<path class="connect_line" d="M245,153L250,153L283,153L283,153"
stroke="#0F364B" fill="none" stroke-width="7" rotate="auto"
marker-end="url(#app5end-arrow-active)"
marker-start="url(#app5end-arrow-active)">
</path>
</g>
</svg>
I also put it on codepen: https://codepen.io/rrandom/pen/yXrRZQ , please have a look

Sticky hover-effect onmouseover in FireFox

If I zoom in and slide my mouse on this rectangles someone of them will stay half-capacity. How can it to fix, to have got ideal situation, as it would be if slide mouse slowly. For example code like this, open with FireFox:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:a="http://ns.adobe.com/adobesvgviewerextensions/3.0/"
x="0px" y="0px" width="800" height="600" viewBox="-400 -300 800 600" xml:space="preserve" font-family="arial" font-size="14">
<defs>
<g id="switcher" cursor="pointer" stroke-width="0.1">
<rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
<!--it scales a few times after change committed to this element -->
<animateTransform attributeType="XML" attributeName="transform" type="scale" dur="0.5s" keyTimes="0;0.5;0.5;1" values="1;1.02;1.02;1" repeatCount="3" fill="freeze"/>
<!--it animates scale up and scale down onclick -->
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="1.15" repeatCount="1" begin="mousedown+0.2s" dur = "0.2s"
fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1.15" to="1" repeatCount="1" begin="mouseup+0.4s" dur = "0.2s"
fill="freeze"/>
<!--it makes half-visible selecting effect -->
<set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"/>
</rect>
</g>
</defs>
<line x1="-200" y1="0" x2="200" y2="0" stroke-width="1" stroke="blue" />
<line x1="0" y1="200" x2="0" y2="-200" stroke-width="1" stroke="blue" />
<line x1="-200" y1="200" x2="200" y2="200" stroke-width="1" stroke="blue" />
<line x1="-200" y1="-200" x2="200" y2="-200" stroke-width="1" stroke="blue" />
<g transform="translate(0,-200)" >
<g transform="scale(100,100)" fill="green" stroke="green" stroke-width="0.05" >
<use xlink:href="#switcher" />
</g>
</g>
<g transform="translate(-200,-200)" >
<g transform="scale(100,100)" fill="green" stroke="green" stroke-width="0.05" >
<use xlink:href="#switcher" />
</g>
</g>
<g transform="translate(200,-200)" >
<g transform="scale(100,100)" fill="green" stroke="green" stroke-width="0.05" >
<use xlink:href="#switcher" />
</g>
</g>
<g transform="translate(0,0)" >
<g transform="scale(100,100)" fill="green" stroke="green" stroke-width="0.05" >
<use xlink:href="#switcher" />
</g>
</g>
<g transform="translate(-200,0)" >
<g transform="scale(100,100)" fill="green" stroke="green" stroke-width="0.05" >
<use xlink:href="#switcher" />
</g>
</g>
<g transform="translate(200,0)" >
<g transform="scale(100,100)" fill="green" stroke="green" stroke-width="0.05" >
<use xlink:href="#switcher" />
</g>
</g>
</svg>
</body>

Well, I have no experience in SVG, and this may be bad practice, but if you add an additional <set.. /> to reverse the opacity animation on mouseout, the animation stops being "sticky" (at least it does on my computer running Firefox 32 beta):
<!--it makes half-visible selecting effect -->
<set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"/>
<!-- explicitly reverse the opacity animation on mouseout -->
<set attributeName="stroke-opacity" begin="mouseout" end="mouseover" to="1"/>

SVG Elements not in view on page load do not display

I have an SVG image (with code generated by Adobe Illustrator CS6) embedded in a web page. I've isolated the SVG code in this jsFiddle (it is also embedded below).
In Chrome (but not Firefox), when the bottom part of the SVG isn't in view, it doesn't render. Shrink the window and scroll to the top of the HTML section on the jsFiddle and then reload to see what I'm talking about. Once you click the section, it appears.
What can I do to fix this?
Edit: WebKit bug filed, as it appears to be a WebKit bug. View bug report
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="690px" height="420px" viewBox="0 43 690 420" enable-background="new 0 43 690 420" xml:space="preserve">
<defs></defs>
<filter id="fullblur" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
<filter id="halfblur" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
<filter id="noblur" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="0" />
</filter>
<!-- BACKGROUND (hidden) -->
<rect y="43" display="none" fill="#D1DBBB" width="690" height="420"/>
<!-- STAGE -->
<ellipse fill="#CC3333" stroke="#000000" cx="339.5" cy="43" rx="169.5" ry="42.5"/>
<!-- SEATS -->
<g>
<!-- STUDENT SECTIONS -->
<g id="studhover">
<g filter="url(#halfblur)" id="studchart" class="chartsection">
<g id="s1">
<path class="sFill" fill="#FECB2F" d="M90.75,136c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V90.5c0-2.761-2.239-5-5-5h-150
c-2.761,0-5,2.239-5,5V136z"/>
<path class="sStroke" fill="none" stroke="#000000" d="M90.75,136c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V90.5c0-2.761-2.239-5-5-5h-150
c-2.761,0-5,2.239-5,5V136z"/>
</g>
<g id="s2">
<path class="sFill" fill="#FECB2F" d="M265.75,150c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150
c-2.761,0-5,2.239-5,5V150z"/>
<path class="sStroke" fill="none" stroke="#000000" d="M265.75,150c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150
c-2.761,0-5,2.239-5,5V150z"/>
</g>
<g id="s3">
<path class="sFill" fill="#FECB2F" d="M439.25,136c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V90.5c0-2.761-2.238-5-5-5h-150c-2.762,0-5,2.239-5,5V136z"/>
<path class="sStroke" fill="none" stroke="#000000" d="M439.25,136c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V90.5c0-2.761-2.238-5-5-5h-150
c-2.762,0-5,2.239-5,5V136z"/>
</g>
<g id="s4">
<path class="sFill" fill="#FECB2F" d="M90.75,205.5c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V160c0-2.761-2.239-5-5-5h-150
c-2.761,0-5,2.239-5,5V205.5z"/>
<path class="sStroke" fill="none" stroke="#000000" d="M90.75,205.5c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V160c0-2.761-2.239-5-5-5h-150
c-2.761,0-5,2.239-5,5V205.5z"/>
</g>
<g id="s5">
<path class="sFill" fill="#FECB2F" d="M265.75,218c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150
c-2.761,0-5,2.239-5,5V218z"/>
<path class="sStroke" fill="none" stroke="#000000" d="M265.75,218c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150
c-2.761,0-5,2.239-5,5V218z"/>
</g>
<g id="s6">
<path class="sFill" fill="#FECB2F" d="M439.25,205.5c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V160c0-2.761-2.238-5-5-5h-150
c-2.762,0-5,2.239-5,5V205.5z"/>
<path class="sStroke" fill="none" stroke="#000000" d="M439.25,205.5c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V160c0-2.761-2.238-5-5-5h-150
c-2.762,0-5,2.239-5,5V205.5z"/>
</g>
</g>
<!-- Filling in the gaps -->
<g>
<rect x="251" y="84" fill="transparent" width="15" height="140" id="sVertLine1" />
<rect x="425" y="84" fill="transparent" width="15" height="140" id="sVertLine2" />
<rect x="266" y="84" fill="transparent" width="159" height="15" id="sHorizLine1" />
<rect x="90" y="140" fill="transparent" width="161" height="15" id="sHorizLine2a" />
<rect x="440" y="140" fill="transparent" width="161" height="15" id="sHorizLine2b" />
<rect x="266" y="153" fill="transparent" width="161" height="15" id="sHorizLine3" />
<rect x="90" y="210" fill="transparent" width="161" height="12" id="sHorizLine4a" />
<rect x="440" y="210" fill="transparent" width="161" height="12" id="sHorizLine4b" />
</g>
</g>
<!-- GUEST SECTIONS -->
<g id="guesthover">
<g filter="url(#halfblur)" id="guestchart" class="chartsection">
<g>
<path class="gFill" fill="#3333CC" d="M91.5,273c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5v-45.5c0-2.761-2.239-5-5-5h-150
c-2.761,0-5,2.239-5,5V273z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M91.5,273c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5v-45.5c0-2.761-2.239-5-5-5h-150
c-2.761,0-5,2.239-5,5V273z"/>
</g>
<g>
<path class="gFill" fill="#3333CC" d="M440,273c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5H445c-2.762,0-5,2.239-5,5
V273z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M440,273c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5H445
c-2.762,0-5,2.239-5,5V273z"/>
</g>
<g>
<path class="gFill" fill="#3333CC" d="M91.5,342.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V297c0-2.762-2.239-5-5-5h-150
c-2.761,0-5,2.238-5,5V342.5z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M91.5,342.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V297c0-2.762-2.239-5-5-5h-150
c-2.761,0-5,2.238-5,5V342.5z"/>
</g>
<g>
<path class="gFill" fill="#3333CC" d="M440,342.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V297c0-2.762-2.238-5-5-5H445c-2.762,0-5,2.238-5,5
V342.5z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M440,342.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V297c0-2.762-2.238-5-5-5H445
c-2.762,0-5,2.238-5,5V342.5z"/>
</g>
<g>
<path class="gFill" fill="#3333CC" d="M266.5,287c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5h-150
c-2.761,0-5,2.239-5,5V287z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M266.5,287c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5h-150
c-2.761,0-5,2.239-5,5V287z"/>
</g>
<g>
<path class="gFill" fill="#3333CC" d="M266.5,355c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150
c-2.761,0-5,2.238-5,5V355z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M266.5,355c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150
c-2.761,0-5,2.238-5,5V355z"/>
</g>
<g>
<path class="gFill" fill="#3333CC" d="M91.5,410.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V365c0-2.762-2.239-5-5-5h-150
c-2.761,0-5,2.238-5,5V410.5z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M91.5,410.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V365c0-2.762-2.239-5-5-5h-150
c-2.761,0-5,2.238-5,5V410.5z"/>
</g>
<g>
<path class="gFill" fill="#3333CC" d="M440,410.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V365c0-2.762-2.238-5-5-5H445c-2.762,0-5,2.238-5,5
V410.5z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M440,410.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V365c0-2.762-2.238-5-5-5H445
c-2.762,0-5,2.238-5,5V410.5z"/>
</g>
<g>
<path class="gFill" fill="#3333CC" d="M266.5,423c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150
c-2.761,0-5,2.238-5,5V423z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M266.5,423c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150
c-2.761,0-5,2.238-5,5V423z"/>
</g>
</g>
<!-- Filling in the gaps -->
<g>
<rect x="251" y="224" fill="transparent" width="15" height="206" id="gVertLine1" />
<rect x="425" y="224" fill="transparent" width="15" height="206" id="gVertLine2" />
<rect x="266" y="222" fill="transparent" width="159" height="15" id="gHorizLine1" />
<rect x="90" y="278" fill="transparent" width="161" height="15" id="gHorizLine2a" />
<rect x="440" y="278" fill="transparent" width="161" height="15" id="gHorizLine2b" />
<rect x="266" y="291" fill="transparent" width="161" height="15" id="gHorizLine3" />
<rect x="90" y="348" fill="transparent" width="161" height="15" id="gHorizLine4a" />
<rect x="440" y="348" fill="transparent" width="161" height="15" id="gHorizLine4b" />
<rect x="266" y="360" fill="transparent" width="161" height="15" id="gHorizLine5" />
<rect x="90" y="417" fill="transparent" width="161" height="13" id="gHorizLine4a" />
<rect x="440" y="417" fill="transparent" width="161" height="13" id="gHorizLine4b" />
</g>
</g>
</g>
</svg>

This is a Webkit bug caused by the use of filters. I removed the <filter> sections and the flter="url(...)" tags to stop the filters from running and it now works.