Set origin and rotation on animateMotion's path - css

I'd like to apply a rotation on a path animated with SVG's animateMotion tag.
It seems that the rule transform-origin:50%;transform: rotate(240deg); applied on the path that the animateMotion tag follows doesn't alter the animation.
<path id="theMotionPathIdLikeToRotate" d="m 100,100 -3e-6,-52.916668 45.82718,26.458333 0,52.916665" stroke-width="5px" stroke="aqua" fill="none" style="transform-origin:50%;transform: rotate(120deg);" stroke-linecap="round" stroke-linejoin="round" />
My aim was to create an animation and repeat it transformed. In this example I wanted to create other moving circles, rotated 120 and 240 degrees around the center of the hexagon.


Only the path definition (d) of the path referenced by an <mpath> element is used. Any transform it might have is ignored.
You would need to apply the transform to the circle and the <mpath> together.
<g style="transform-origin:50%;transform: rotate(240deg);">
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="4.45s" repeatCount="once">
<mpath xlink:href="#theMotionPath3"/>
</animateMotion>
</circle>
</g>"
<!DOCTYPE HTML>
<html>
<body>
<?xml version="1.0"?>
<svg width="400" height="400" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" style="background:aquamarine">
<style>
path {
animation-name:animateDash;
animation-duration:5s;
animation-iteration-count:once;
}
#keyframes animateDash {
from{stroke-dasharray:0,2305}
to {stroke-dasharray:2305,0}
}
</style>
<circle cx="50%" cy="50%" r="1" fill="firebrick" />
<path id="theMotionPath" d="m 100,100 -3e-6,-52.916668 45.82718,26.458333 0,52.916665" stroke-width="5px" stroke="antiquewhite" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<path id="theMotionPath2" d="m 100,100 -3e-6,-52.916668 45.82718,26.458333 0,52.916665" stroke-width="5px" stroke="aqua" fill="none" style="transform-origin:50%;transform: rotate(120deg);" stroke-linecap="round" stroke-linejoin="round" />
<path id="theMotionPath3" d="m 100,100 -3e-6,-52.916668 45.82718,26.458333 0,52.916665" stroke-width="5px" stroke="azure" fill="none" style="transform-origin:50%;transform: rotate(240deg);" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="4.45s" repeatCount="once">
<mpath xlink:href="#theMotionPath3"/>
</animateMotion>
</circle>
<g style="transform-origin:50%;transform: rotate(120deg);">
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="4.45s" repeatCount="once">
<mpath xlink:href="#theMotionPath3"/>
</animateMotion>
</circle>
</g>"
<g style="transform-origin:50%;transform: rotate(240deg);">
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="4.45s" repeatCount="once">
<mpath xlink:href="#theMotionPath3"/>
</animateMotion>
</circle>
</g>"
<!--- HIDES animateMotion's reset-->
<circle cx="" cy="" r="20" fill="aquamarine" />
<script type="text/javascript">
console.log(theMotionPath.getTotalLength());
</script>
</svg>
</body>
</html>

Related

SVG balls animated along a path

I am trying to make SVG dots/balls run along a path. What i am struggling with is using multiple animations on one page. The dots all seem to listen to the first path and I would like each set to be unique. What i have below.
Also I am inserting this code inside an html code block on a wordpress page so I like how this doesn't require the head css style and the traditional css transform codes etc and is nicely contained to use inside svg tag. It works perfectly but when i use another wave further down the page is listens to the first path motion.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
width="3000" height="400" viewBox="0 0 3000 400">
<path d="M0,58.5c201.2,0,296.3,141.4,498.4,141.4S801.6,58.5,999.8,58.5s302.9,141.4,500.2,141.4
s306.3-141.4,502.5-141.4s305.2,141.4,499.4,141.4c194.2,0,299.2-141.4,498.1-141.4"
stroke="#444444" stroke-width="2" fill="none" id="wire"></path>
<circle cx="" cy="" r="8" fill="#444444">
<animatemotion dur="10s" repeatCount="indefinite" calcMode="spline" keyTimes="0;1" keySplines="0.1 0.4 0.8 0.9">
<mpath xlink:href="#wire"></mpath>
</animatemotion>
</circle>
<circle cx="" cy="" r="4" fill="#444444">
<animatemotion dur="5s" repeatCount="indefinite" calcMode="spline" keyTimes="0;1" keySplines="0.1 0.2 0.8 0.9">
<mpath xlink:href="#wire"></mpath>
</animatemotion>
</circle>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
width="3000" height="400" viewBox="0 0 3000 400">
<path d="M0,135.5c501.6-4.4,502.9,150.6,1004.5,146.2c501.6-4.4,500.2-159.3,1001.8-163.7
c501.6-4.4,502.9,150.6,1004.5,146.2"
stroke="#222222" stroke-width="2" fill="none" id="wire"></path>
<circle cx="" cy="" r="8" fill="#222222">
<animatemotion dur="10s" repeatCount="indefinite" calcMode="spline" keyTimes="0;1" keySplines="0.1 0.4 0.8 0.9">
<mpath xlink:href="#wire"></mpath>
</animatemotion>
</circle>
<circle cx="" cy="" r="4" fill="#222222">
<animatemotion dur="5s" repeatCount="indefinite" calcMode="spline" keyTimes="0;1" keySplines="0.1 0.2 0.8 0.9">
<mpath xlink:href="#wire"></mpath>
</animatemotion>
</circle>
</svg>
https://codepen.io/Tuff-Lover/pen/ZEodgPY

How can I make gradient line segments move along an SVG path

I have an animation I would like to make on an HTML5 document. I would like to have some short line segments move along a path. The line segments should have a gradient so that the front is opaque and the tail fade out to fully transparent.
I could use a stroke-dasharray and animate an offset (https://css-tricks.com/svg-line-animation-works/#article-header-id-4) but so far as I can tell linear gradients for strokes behave essentially to the entire shape, not just the stroke segment (https://codepen.io/plava/pen/BjavpN).
Is there perhaps a way that I can take a line and slide it along another path? That would let me apply a gradient to that line alone. My lines are moving from left to right sort of following a sine wave like curve, so if the gradient doesn't bend with the line that is okay.
This is part of an Electron app, so it only needs to be compatible with a somewhat recent version of Chromium.

One way would be to use multiple paths with different length dashes and different opacities. As long as the dash arrays have the same total length, and the dashoffsets plus the first element of the dash array is the same value for each path, the ends of the dashes will be in the same position:
#path {
stroke-dasharray: 10 90;
animation: dash 5s linear alternate infinite;
stroke: black;
stroke-width: 5;
}
#path2 {
stroke-dasharray: 20 80;
animation: dash2 5s linear alternate infinite;
stroke: rgba(0,0,0,0.5);
stroke-width: 5;
}
#keyframes dash {
from {
stroke-dashoffset: 100;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes dash2 {
from {
stroke-dashoffset: 110;
}
to {
stroke-dashoffset: 10;
}
}
It's kind of a hassle to keep adding more css, so I automated the creation of the css using some javascript here: https://jsfiddle.net/aqwg7ed6/
That fiddle automatically creates 32 paths which creates a nice effect.

here's how i managed to do so:
<svg id="group-01" width="1668" height="1527" viewBox="0 0 1668 1527" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="loop-01" d="M 417.00,-648.50 C 647.03,-648.50 833.50,-462.03 833.50,-232.00 833.50,-232.00 833.50,253.00 833.50,253.00 833.50,483.03 647.03,669.50 417.00,669.50 417.00,669.50 417.00,669.50 417.00,669.50 186.97,669.50 0.50,483.03 0.50,253.00 0.50,253.00 0.50,-232.00 0.50,-232.00 0.50,-462.03 186.97,-648.50 417.00,-648.50 417.00,-648.50 417.00,-648.50 417.00,-648.50 Z" />
<path id="loop-02" d="M 1250.00,-648.50 C 1480.03,-648.50 1666.50,-462.03 1666.50,-232.00 1666.50,-232.00 1666.50,253.00 1666.50,253.00 1666.50,483.03 1480.03,669.50 1250.00,669.50 1250.00,669.50 1250.00,669.50 1250.00,669.50 1019.97,669.50 833.50,483.03 833.50,253.00 833.50,253.00 833.50,-232.00 833.50,-232.00 833.50,-462.03 1019.97,-648.50 1250.00,-648.50 1250.00,-648.50 1250.00,-648.50 1250.00,-648.50 Z" />
<path id="loop-03" d="M 418.00,670.50 C 648.03,670.50 834.50,856.97 834.50,1087.00 834.50,1087.00 834.50,1572.00 834.50,1572.00 834.50,1802.03 648.03,1988.50 418.00,1988.50 418.00,1988.50 418.00,1988.50 418.00,1988.50 187.97,1988.50 1.50,1802.03 1.50,1572.00 1.50,1572.00 1.50,1087.00 1.50,1087.00 1.50,856.97 187.97,670.50 418.00,670.50 418.00,670.50 418.00,670.50 418.00,670.50 Z" />
<path id="loop-04" d="M 1251.00,670.50 C 1481.03,670.50 1667.50,856.97 1667.50,1087.00 1667.50,1087.00 1667.50,1572.00 1667.50,1572.00 1667.50,1802.03 1481.03,1988.50 1251.00,1988.50 1251.00,1988.50 1251.00,1988.50 1251.00,1988.50 1020.97,1988.50 834.50,1802.03 834.50,1572.00 834.50,1572.00 834.50,1087.00 834.50,1087.00 834.50,856.97 1020.97,670.50 1251.00,670.50 1251.00,670.50 1251.00,670.50 1251.00,670.50 Z" />
<radialGradient id="fade-01" cx="0" cy="0" fx="0" fy="0" r="200" gradientUnits="userSpaceOnUse">
<stop stop-color="#80D2B5" stop-opacity="1" offset="0" />
<stop stop-color="#0D1115" stop-opacity="0" offset="1" />
</radialGradient>
<radialGradient id="fade-02" cx="0" cy="0" fx="0" fy="0" r="200" gradientUnits="userSpaceOnUse">
<stop stop-color="#5332D5" stop-opacity="1" offset="0" />
<stop stop-color="#0E1216" stop-opacity="0" offset="1" />
</radialGradient>
<mask id="tail-01" maskUnits="userSpaceOnUse">
<use style="fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:100% -100%" xlink:href="#loop-01">
<animate attributeName="stroke-dashoffset" from="100%" to="-100%" dur="10s" repeatCount="indefinite" />
</use>
</mask>
<mask id="tail-02" maskUnits="userSpaceOnUse">
<use style="fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:100% -100%" xlink:href="#loop-02">
<animate attributeName="stroke-dashoffset" from="100%" to="-100%" dur="10s" repeatCount="indefinite" />
</use>
</mask>
<mask id="tail-03" maskUnits="userSpaceOnUse">
<use style="fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:100% -100%" xlink:href="#loop-03">
<animate attributeName="stroke-dashoffset" from="100%" to="-100%" dur="10s" repeatCount="indefinite" />
</use>
</mask>
<mask id="tail-04" maskUnits="userSpaceOnUse">
<use style="fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:100% -100%" xlink:href="#loop-04">
<animate attributeName="stroke-dashoffset" from="100%" to="-100%" dur="10s" repeatCount="indefinite" />
</use>
</mask>
</defs>
<g style="mask:url(#tail-01)">
<circle style="fill:url(#fade-01);" cx="0" cy="0" r="200">
<animateMotion keyPoints="0;1" keyTimes="0;1" dur="10s" repeatCount="indefinite">
<mpath xlink:href="#loop-01" />
</animateMotion>
</circle>
</g>
<g style="mask:url(#tail-02)">
<circle style="fill:url(#fade-02);" cx="0" cy="0" r="200">
<animateMotion keyPoints="0;1" keyTimes="0;1" dur="10s" repeatCount="indefinite">
<mpath xlink:href="#loop-02" />
</animateMotion>
</circle>
</g>
<g style="mask:url(#tail-03)">
<circle style="fill:url(#fade-02);" cx="0" cy="0" r="200">
<animateMotion keyPoints="0;1" keyTimes="0;1" dur="10s" repeatCount="indefinite">
<mpath xlink:href="#loop-03" />
</animateMotion>
</circle>
</g>
<g style="mask:url(#tail-04)">
<circle style="fill:url(#fade-01);" cx="0" cy="0" r="200">
<animateMotion keyPoints="0;1" keyTimes="0;1" dur="10s" repeatCount="indefinite">
<mpath xlink:href="#loop-04" />
</animateMotion>
</circle>
</g>
<rect x="833.5" y="-648.5" width="833" height="1318" rx="416.5" stroke="white" stroke-opacity="0.08" />
<rect x="834.5" y="670.5" width="833" height="1318" rx="416.5" stroke="white" stroke-opacity="0.08" />
<rect x="1.5" y="670.5" width="833" height="1318" rx="416.5" stroke="white" stroke-opacity="0.08" />
<rect x="0.5" y="-648.5" width="833" height="1318" rx="416.5" stroke="white" stroke-opacity="0.08" />
</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>

SMIL Animation Not Ending On Mouseout

I'm trying to make an SVG icon that animates using SMIL (well, I don't care if it's SMIL or CSS, I just don't want to use JS) on hover and I've gotten pretty far but I've run into a problem that I can't find answered or even mentioned online. The animation starts on mouseover (hover) but on mouseout one of the animated elements (2nd circle) keeps animating and I'm at a total loss as to why.
You can also see it at https://codepen.io/anon/pen/LmjpVQ
Thanks for any help you can provide in advance.
svg { width: 100px; color: red; }
<svg id="location" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
<defs>
<clipPath id="circleClip">
<path d="M49,19c0,7-12,26-18.97,26C23,45,12,26,12,19H49z M72-12h-84v84h84V-12z" />
</clipPath>
</defs>
<g clip-path="url(#circleClip)">
<g transform="matrix(1, 0, 0, 0.43999, 0, 25.2)">
<circle transform="rotate(-90, 30, 47)" fill="none" stroke="currentColor" stroke-width="2" cx="30" cy="47" r="14">
<animate attributeType="XML" attributeName="r" from="0" to="20" begin="location.mouseover" end="location.mouseout" dur="3s" repeatCount="indefinite" />
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" begin="location.mouseover" end="location.mouseout" dur="3s" repeatCount="indefinite" />
</circle>
<circle transform="rotate(-90, 30, 47)" fill="none" stroke="currentColor" stroke-width="2" cx="30" cy="47" r="0">
<animate ttributeType="XML" attributeName="r" from="0" to="20" begin="location.mouseover+2s" end="location.mouseout" dur="3s" repeatCount="indefinite" />
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" begin="location.mouseover+2" end="location.mouseout" dur="3s" repeatCount="indefinite" />
</circle>
</g>
</g>
<path fill="currentColor" stroke="currentColor" stroke-width="0" d="M30,7c7.18,0,13,5.82,13,13S30,45,30,45S17,27.18,17,20S22.82,7,30,7z" />
<path fill="#fff" stroke-width="0" d="M30,15c2.76,0,5,2.24,5,5s-2.24,5-5,5c-2.76,0-5-2.24-5-5S27.24,15,30,15" />
</svg>

The trap you got caught in was that, unlike HTML elements, mouse events are raised as a default only when the pointer is over an area that is painted (stroke or fill)., but no matter what opacity is set to. You can even fine-tune pointer-events to either include or exclude events for visibility: hidden or fill: none.
The mouseover event is raised every time the spreading circle you animated passes under the pointer, With pointer-events:all you could prevent mousout when the mouse ends up over the interior, but only until the animation repeat resets the radius. This makes things pretty confusing.
The most simple solution is to lay an invisible rect with opacity="0" on top of the whole icon, so that there are clearly defined borders for "inside" and "outside". For more finetuning, define a shape that covers the area where you want to capture mouse moves.
svg { width: 100px; color: red; }
<svg id="loc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
<defs>
<clipPath id="c">
<path d="M49,19c0,7-12,26-18.97,26C23,45,12,26,12,19H49z M72-12h-84v84h84V-12z" />
</clipPath>
</defs>
<g clip-path="url(#c)">
<g transform="matrix(1, 0, 0, 0.43999, 0, 25.2)">
<circle transform="rotate(-90, 30, 47)" fill="none" stroke="currentColor" stroke-width="2" cx="30" cy="47" r="14">
<animate attributeType="XML" attributeName="r" from="0" to="20" begin="loc.mouseover" end="loc.mouseout" dur="3s" repeatCount="indefinite" />
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" begin="loc.mouseover" end="loc.mouseout" dur="3s" repeatCount="indefinite" />
</circle>
<circle transform="rotate(-90, 30, 47)" fill="none" stroke="currentColor" stroke-width="2" cx="30" cy="47" r="0">
<animate ttributeType="XML" attributeName="r" from="0" to="20" begin="loc.mouseover+2s" end="loc.mouseout" dur="3s" repeatCount="indefinite" />
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" begin="loc.mouseover+2" end="loc.mouseout" dur="3s" repeatCount="indefinite" />
</circle>
</g>
</g>
<path fill="currentColor" stroke="currentColor" d="M30,7c7.18,0,13,5.82,13,13S30,45,30,45S17,27.18,17,20S22.82,7,30,7z" />
<path fill="#fff" d="M30,15c2.76,0,5,2.24,5,5s-2.24,5-5,5c-2.76,0-5-2.24-5-5S27.24,15,30,15" />
<rect opacity="0" width="100%" height="100%" />
</svg>

Hovering over transparent SVGs

How do I get hover to work robustly with transparent SVG polygons?
In the code below, you'll see that the second triangle isn't readily recognizing :hover (and it fails completely when stroke attribute is deleted or none'd). In the third triangle, hover starts to work with transparency, but only near the text.
<html><head><style>
body { background-color: Green }
polygon:hover {
fill:Red;
}
g:hover polygon {
fill:Red;
}
</style></head><body>
<svg width="300px" height="600px" viewBox="0 0 100 200" xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon fill="white" stroke="black" stroke-width="0.5px" points="0,0 100,0 100,100 0,0" />
<polygon fill="none" stroke="black" stroke-width="0.5px" points="0,0 0,100 100,100 0,0" />
<g>
<polygon fill="none" stroke="black" stroke-width="0.5px" points="0,100 100,100 100,200 0,100" />
<text x="50" y="150" font-family="Verdana" font-size="30">hi</text>
</g>
</svg>
</body></html>
I've confirmed this over Chrome, Firefox, and Safari. Any ideas (that'll work across most browsers)?

For each element state the fill color as fill="red", and set 0 as the fill opacity fill-opacity="0". On hover change the fill-opacity to 1:
body {
background-color: Green
}
polygon:hover {
fill-opacity: 1;
}
g:hover polygon {
fill-opacity: 1;
}
<svg width="300px" height="600px" viewBox="0 0 100 200" xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon fill="white" stroke="black" stroke-width="0.5px" points="0,0 100,0 100,100 0,0" />
<polygon fill="red" fill-opacity="0" stroke="black" stroke-width="0.5px" points="0,0 0,100 100,100 0,0" />
<g>
<polygon fill="red" fill-opacity="0" stroke="black" stroke-width="0.5px" points="0,100 100,100 100,200 0,100" />
<text x="50" y="150" font-family="Verdana" font-size="30">hi</text>
</g>
</svg>

Another approach is to use pointer-events="all".
With pointer-events you can control wich part of your shape reacts to pointer-events, independently of its fill or stroke.
circle:nth-of-type(1) {
pointer-events: fill
}
circle:nth-of-type(2) {
pointer-events: all
}
circle:nth-of-type(3) {
pointer-events: stroke
}
circle:nth-of-type(4) {
pointer-events: none
}
circle:hover {
fill: red;
stroke: blue
}
<svg width="300px" height="300px" viewBox="0 0 100 100">
<circle cx="25" cy="25" r="20" fill="none" stroke="red" stroke-width="5" />
<circle cx="75" cy="25" r="20" fill="none" stroke="none" stroke-width="5" />
<circle cx="25" cy="75" r="20" fill="green" stroke="none" stroke-width="5" />
<circle cx="75" cy="75" r="20" fill="green" stroke="red" stroke-width="5" />
</svg>

Resources