Develop Reference

How can I get elementFromPoint() to return an SVG g element? [duplicate]

I'm working on some animated SVGs with CSS animations that triggers on hover.
I'm being able to have the SVG animate on hover the way I want to for Chrome but I'm facing a Firefox and Safari issue.
Apparently, the pointer-events property applied to groups <g></g> doesn't give same behavior on this browser than on the other modern ones, at least when trying to set the value to bounding-box.
I'm doing
g {
pointer-events: bounding-box;
}
but the hover only gets triggered when the actual <path> element is hovered, not the whole group <g> as I would need to.
Can I use doesn't say anything about this, it mentions svgs also have support for this property.
Below there's a sample code for you to see how one of my SVGs looks like.
On chrome hovering the main containing group area will trigger the hover animation, on Firefox the actual path (the icon lines in this case) needs to be hovered in order to that to happen.
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<style>
g {
pointer-events: bounding-box;
//not working on FF
}
#mobile:hover .flip {
transform-origin:55% 50%;
-moz-transform-origin:55% 50%;
animation: flip_left 1.6s forwards;
}
#keyframes flip_left {
0% {transform: perspective(2000px) rotateY(90deg) skewY(-1deg)}
30% {transform:perspective(2000px) rotateY(-25deg) skewY(-0.8deg)}
50% {transform:perspective(2000px) rotateY(20deg) skewY(0.8deg)}
70% {transform:perspective(2000px) rotateY(-10deg) skewY(-0.8deg)}
100% {transform:perspective(2000px) rotateY(0deg)}
}
</style>
<!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
<title>Mobile solutions</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="mobile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="MS_HP_Usecase_Based_Page-Desktop-2A" transform="translate(-766.000000, -418.000000)" stroke="#00A0DF" stroke-width="1.25">
<g id="Asset-5" transform="translate(766.000000, 418.000000)">
<g class="flip">
<rect id="Rectangle-path" stroke-linecap="round" stroke-linejoin="round" x="12.35" y="7.41" width="15.32" height="25.33" rx="2.03"></rect>
<circle id="Oval" stroke-linecap="round" stroke-linejoin="round" cx="20.01" cy="28.72" r="1.58"></circle>
<path d="M18.43,10.72 L21.48,10.72" id="Shape" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
<circle id="Oval" cx="19.67" cy="19.67" r="19.04"></circle>
</g>
</g>
</g>
</svg>
I would like to find a workaround for this, since I want to make this animations work cross browser. I would like to eventually make it work for IE11 and Edge too.
Thanks,

So pointer-events: bounding-box seems to not be supported by most browsers.
I implemented the workaround #ccprog suggested on the comments section of my question.
I added a <rect fill="none"> element to svg, that is same dimensions than the SVG itself. I added a :hover selector for that element and sibling selector ~ to select its sibling group with the flip class inside.
See CSS:
#mobile-hover {
visibility: visible;
pointer-events: visible;
}
#mobile-hover:hover ~ .group .flip {
-moz-transform-origin:55% 50%;
-webkit-transform-origin: 55% 50%;
transform-origin:55% 50%;
-webkit-animation: flip_left 1.6s forwards;
animation: flip_left 1.6s forwards;
}
I found out I had to add pointer-events: visible to the rect element so it would detect the :hover. I added visibility: visible as a requirement to pointer-events: visible to work.
Below the full new SVG code:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="mobile-icon">
<style>
#mobile-hover {
visibility: visible;
pointer-events: visible;
}
#mobile-hover:hover ~ .group .flip {
-moz-transform-origin:55% 50%;
-webkit-transform-origin: 55% 50%;
transform-origin:55% 50%;
-webkit-animation: flip_left 1.6s forwards;
animation: flip_left 1.6s forwards;
}
#keyframes flip_left {
0% {transform: perspective(2000px) rotateY(90deg) skewY(-1deg)}
30% {transform:perspective(2000px) rotateY(-25deg) skewY(-0.8deg)}
50% {transform:perspective(2000px) rotateY(20deg) skewY(0.8deg)}
70% {transform:perspective(2000px) rotateY(-10deg) skewY(-0.8deg)}
100% {transform:perspective(2000px) rotateY(0deg)}
}
</style>
<!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
<title>Mobile solutions</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="mobile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" >
<rect fill="none" width="40" height="40" id="mobile-hover">
</rect>
<g id="MS_HP_Usecase_Based_Page-Desktop-2A" transform="translate(-766.000000, -418.000000)" stroke="#00A0DF" stroke-width="1.25" class="group">
<g id="Asset-5" transform="translate(766.000000, 418.000000)">
<g class="flip">
<rect id="Rectangle-path" stroke-linecap="round" stroke-linejoin="round" x="12.35" y="7.41" width="15.32" height="25.33" rx="2.03"></rect>
<circle id="Oval" stroke-linecap="round" stroke-linejoin="round" cx="20.01" cy="28.72" r="1.58"></circle>
<path d="M18.43,10.72 L21.48,10.72" id="Shape" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
<circle id="Oval" cx="19.67" cy="19.67" r="19.04"></circle>
</g>
</g>
</g>
</svg>
Works on Chrome, Safari and Firefox and I'm attempting to test IE11 and Edge next.
Many thanks,

How can I make this seamless SVG rock texture sparkle

I have rocks in this image:
.rock {
width: 100%;
height: 200vh;
}
.rock:before {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(rock.svg);
background-size: 384px;
background-repeat: repeat;
-webkit-mask-image: linear-gradient(transparent 0%, #fff 10%, #fff 90%, transparent 100%);
mask-image: linear-gradient(transparent 0%, #fff 10%, #fff 90%, transparent 100%);
/*box-shadow: inset 0 0 0 2px black;*/
}
And the SVG looks like this essentially:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<g>
...
<path d="M61.639,162.195c0.483-0.863,0.887-1.493,1.114-1.659l-0.859,0.215C61.757,161.203,61.694,161.695,61.639,162.195z"/>
<path d="M62.753,160.536l0.141-0.035C62.86,160.477,62.812,160.493,62.753,160.536z"/>
<path d="M53.959,179.342c-2.256,3.034-3.331,7.56-4.521,10.83C50.734,186.206,53.188,183.417,53.959,179.342z"/>
<path d="M53.959,179.342c0.363-0.488,0.754-0.942,1.184-1.342l-1,0.25C54.104,178.631,54.027,178.984,53.959,179.342z"/>
<path d="M159.644,110l2-4c-2.467,3.473-4.598,7.94-5.592,11.998C157.587,115.744,158.907,112.613,159.644,110z"/>
<path d="M117.162,179.287c0.024-0.063,0.059-0.096,0.09-0.138c-0.964-0.864-1.931-1.724-2.905-2.571
C115.11,177.611,116.044,178.677,117.162,179.287z"/>
<path d="M117.894,178.75c-0.193,0.177-0.464,0.158-0.642,0.398c1.052,0.944,2.1,1.896,3.142,2.852L117.894,178.75z"/>
<path d="M182.939,156.556c-0.409,0.524-0.674,1.081-0.725,1.665c0.221,0.015,0.454-0.017,0.692-0.066
c2.024-0.429,4.557-3.049,5.555-5.277C186.501,153.797,184.119,155.045,182.939,156.556z"/>
<path d="M188.894,151.25c-0.012,0.482-0.17,1.041-0.432,1.627c0.984-0.461,1.866-0.842,2.432-1.127L188.894,151.25z"/>
</g>
</svg>
I am using it in HTML like this:
<div class='rock'></div>
The question is, how can I instead dig into the SVG and animate each rock individually and separately, so that each one appears to fade in and out at random, sparkling.

per #zero298, you can't do this if you use the SVG as a background image, so you'll have to embed it directly in the page. That said, if you embed it directly, it's possible:
First, add an individual id or class to each rock path (I suggest randomly adding five classes; let's call them fast, mediumfast, medium, mediumslow, slow. Then, create a simple keyframes animation in CSS - something like this:
#keyframes fadeInOut {
start {
opacity: 1;
}
end {
opacity: 0.8; // Modify this value to change how extreme the fading is
}
}
Now you need to apply the animation to the rocks. To make it 'twinkle', I'd use a couple of different animation durations so they don't all fade out together. All of them will share some of the same properties, like so:
#yourSVGId path {
animation: fadeInOut 1s ease infinite alternate;
}
.fast {
animation-duration: 0.3s;
}
.mediumfast {
animation-duration: 0.5s;
}
.medium {
animation-duration: 0.7s;
}
.mediumslow {
animation-duration: 0.9s;
}
.slow {
animation-duration: 1.1s;
}

You won't be able to refer to individual rocks within the SVG if you use the SVG as a background-image. The image is considered one single entity and CSS cannot affect elements within it. Consider my related answer here: :hover not working on svg when svg is in external file.
I would suggest embedding the SVG into the HTML so that you can interact with it as a first class entity. From there you have a lot of different ways to affect your SVG including direct manipulation or using CSS animations or transitions. Consider the example below that uses CSS transitions.
function rand(floor, ceil) {
return Math.floor(Math.random() * (ceil - floor) + floor);
}
setInterval(() => {
const circles = document.querySelectorAll("#rocky circle");
const circle = circles[rand(0, circles.length)];
circle.classList.toggle("animate");
}, 500);
#rocky circle {
opacity: 0;
transition: opacity 400ms ease;
}
#rocky circle.animate {
opacity: 1;
}
<div id="rocky">
<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" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<g>
<circle cx="50" cy="50" r="10"/>
<circle cx="100" cy="50" r="10"/>
<circle cx="150" cy="50" r="10"/>
<circle cx="50" cy="100" r="10"/>
<circle cx="100" cy="100" r="10"/>
<circle cx="150" cy="100" r="10"/>
<circle cx="50" cy="150" r="10"/>
<circle cx="100" cy="150" r="10"/>
<circle cx="150" cy="150" r="10"/>
</g>
</svg>
</div>
If you want to achieve a repeating texture, you'll have to refer to the background as a separate entity (i.e. not in the DOM). That way the browser will be able to treat it as a texture and be able to repeat it. Otherwise, you'll have to manually tile and repeat the elements within the DOM.
Consider the example below which borrows a little bit of CSS from Ian's answer so that we use CSS animations. Transitions won't work since they won't repeat:
const svg = `
<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" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<style>
#keyframes fadeInOut {
from {
opacity: 1;
}
to {
opacity: 0.5;
}
}
circle.animated {
animation: fadeInOut 1s ease infinite alternate;
}
circle.animated.fast {
animation-duration: 0.3s;
}
circle.animated.medium {
animation-duration: 0.7s;
}
circle.animated.slow {
animation-duration: 1.1s;
}
</style>
<g>
<circle class="animated fast" cx="0" cy="0" r="10"/>
<circle class="animated medium" cx="50" cy="0" r="10"/>
<circle class="animated fast" cx="100" cy="0" r="10"/>
<circle class="animated medium" cx="0" cy="50" r="10"/>
<circle class="animated slow" cx="50" cy="50" r="10"/>
<circle class="animated medium" cx="100" cy="50" r="10"/>
<circle class="animated fast" cx="0" cy="100" r="10"/>
<circle class="animated medium" cx="50" cy="100" r="10"/>
<circle class="animated fast" cx="100" cy="100" r="10"/>
</g>
</svg>
`.replace(/\r?\n/g, "");
const rocky = document.getElementById("rocky");
rocky.style.background = `url('data:image/svg+xml;utf8,${svg}')`;
#rocky {
width: 500px;
height: 500px;
}
<div id="rocky"></div>

Animate scale rotate svg element

Assuming I have an svg made with inkscape.
In this SVG set with a viewbox, I want to animate each element inside the SVG.
There is no problem for translate or opacity ... but when I need to rotate or scale a single element, it acting weird.
I try to correctly understand the concept of the viewbox but I need some help.
I understand that I have only one origin point when I have only one viewbox should I set multiple viewbox ?
<?xml version="1.0" encoding="UTF-8"?>
<svg id="SVGRoot" version="1.1" viewBox="0 0 700 500" xmlns="http://www.w3.org/2000/svg">
// rotate or scale acting weird
<ellipse id="path9238" cx="332.91" cy="143.85" rx="64.941" ry="67.676" style="fill-rule:evenodd;fill:#f00;stroke:#000"/>
// rotate or scale acting weird
<rect id="rect9240" x="400.59" y="270.31" width="173.63" height="177.73" style="fill-rule:evenodd;fill:#f00;paint-order:normal"/>
// rotate or scale acting weird
<path id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;paint-order:normal"/>
</svg>
I'm using anime.js 3.0 or CSS or I can try anything else

In Svg, the coordinates of any figure always have an absolute value that is calculated from the upper left corner of the SVG canvas.
Therefore, when applying the scale (2) command, the coordinates of the center of the figure will also be doubled and the figure will shift to the right and down.
<svg id="SVGRoot" version="1.1" width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" style="border:1px solid grey;">
<rect id="rect9240" transform="scale(2)" x="100" y="100" width="100" height="100" style="fill-rule:evenodd;fill:#f00;> stroke:#000; paint-order:normal">
<animateTransform
xlink:href="#rect9240"
attributeName="transform"
type="scale"
values="1;2;2;1;1"
dur="8s"
fill="freeze"
repeatcount="indefinite"
/>
</rect>
<circle cx="150" cy="150" r="3" fill="black" />
<circle cx="300" cy="300" r="3" fill="dodgerblue" />
<text x="150" y="140" font-size="16px" text-anchor="middle" > Center (150,150) </text>
<text x="300" y="290" font-size="16px" text-anchor="middle" > Center (300,300) </text>
</svg>
To return the enlarged figure to its original position, you must use the command translate (X, Y)
There is a great post here by #Paul LeBeau where this is explained in detail.
CSS solution
In order not to calculate the position of the center of the figure, you can use the CSS rule transform-box: fill-box
When the value of the fill-box attribute is selected
The object bounding box is used as the reference box.
Below is an example of increasing and decreasing the size of figures:
svg {
width:50%;
}
.ellipse1, .rect1, .path1 {
transform-box: fill-box;
animation: scale 3s linear infinite alternate;
animation-direction: alternate;
transform-origin:50% 50%;
}
#keyframes scale {
0% { transform: scale(0.5); }
100% { transform: scale(1); }
}
<svg id="SVGRoot" version="1.1" viewBox="0 0 700 500" xmlns="http://www.w3.org/2000/svg">
<ellipse class="ellipse1" id="path9238" cx="332.91" cy="143.85" rx="64.941" ry="67.676" style="fill-rule:evenodd;fill:#f00;stroke:#000"/>
<rect class="rect1" id="rect9240" x="400.59" y="270.31" width="173.63" height="177.73" style="fill-rule:evenodd;fill:#f00; stroke:#000; paint-order:normal"/>
<path class="path1" id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;stroke:#000; paint-order:normal"/>
</svg>
Rotation example
svg {
width:50%;
}
.ellipse1, .rect1, .path1 {
transform-box: fill-box;
animation: spin 4s linear infinite alternate;
transform-origin:50% 50%;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
<path class="path1" id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;stroke:#000; paint-order:normal"/>
</svg>
<svg id="SVGRoot" version="1.1" viewBox="0 0 700 500" xmlns="http://www.w3.org/2000/svg">
<ellipse class="ellipse1" id="path9238" cx="332.91" cy="143.85" rx="64.941" ry="67.676" style="fill-rule:evenodd;fill:#f00;stroke:#000"/>
<rect class="rect1" id="rect9240" x="400.59" y="270.31" width="173.63" height="177.73" style="fill-rule:evenodd;fill:#f00; stroke:#000; paint-order:normal"/>
<path class="path1" id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;stroke:#000; paint-order:normal"/>
</svg>
Increase and rotation
svg {
width:50%;
}
.ellipse1, .rect1, .path1 {
transform-box: fill-box;
animation: scale1 4s linear, spin 4s linear 4s infinite alternate;
transform-origin:50% 50%;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#keyframes scale1 {
0% { transform: scale(0.5);}
100% { transform: scale(1);}
}
<svg id="SVGRoot" version="1.1" viewBox="0 0 700 500" xmlns="http://www.w3.org/2000/svg">
<ellipse class="ellipse1" id="path9238" cx="332.91" cy="143.85" rx="64.941" ry="67.676" style="fill-rule:evenodd;fill:#f00;stroke:#000"/>
<rect class="rect1" id="rect9240" x="400.59" y="270.31" width="173.63" height="177.73" style="fill-rule:evenodd;fill:#f00; stroke:#000; paint-order:normal"/>
<path class="path1" id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;stroke:#000; paint-order:normal"/>
</svg>

I guess you mean the transform-origin CSS propierty. It is related to the center point of the svg file. Then, you need to calculate the center point of the element to animate related to document's center point.
For the animations you can use CSS animations.

The basics of viewBox is that the 4 numbers are "x y width height”. Generally the x/y coordinates are 0 which keeps your origin in the top left corner. Something people often do is place the origin in the middle.
In order to do that you move your viewBox top left by half of the width and half the height. In your case "-350 -250 700 500".

Need help to close my SVG Christmas box using CSS3 animation and transform

I have the following box:
#keyframes closeLeft {
0% {
transform: skew(0deg);
}
50% {
transform: skew(-251deg);
}
100% {
transform: skew(0deg);
}
}
#keyframes closeRight {
0% {
transform: skew(0deg);
}
50% {
transform: skew(251deg);
}
100% {
transform: skew(0deg);
}
}
#arm-box-upcover-left {
animation: closeLeft 3s linear infinite;
transform-origin: 570px 623px;
}
#arm-box-upcover-right {
animation: closeRight 3s linear infinite;
transform-origin: 570px 623px;
}
<svg id="city-total-v2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<g id="arm-box">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#07002C" points="537.21,626.07 553.15,615.79 535.62,611.12
519.09,621.32 537.21,626.07 "/>
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#7C0A67" points="519.47,620.96 520.23,639.55 537.88,644.29
537.13,625.71 519.47,620.96 "/>
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#07002C" points="536.69,625.78 537.92,644.25 553.97,633.84
552.98,615.43 536.69,625.78 "/>
<polygon id="arm-box-upcover-right" fill-rule="evenodd" clip-rule="evenodd" fill="#7C0A67" points="551.74,617.11 552.1,599.36 534.57,594.68
533.62,612.36 551.74,617.11 "/>
<polygon id="arm-box-upcover-left" fill-rule="evenodd" clip-rule="evenodd" fill="#B21255" points="537.09,626.3 526.49,612.56 508.96,607.88
518.97,621.56 537.09,626.3 "/>
</g>
</svg>
I want to be able to close it. I have played with skew and transform-origin, but I wasn't able to perfectly close it and open it.
Do you know what transformation I need to apply in order to close my box?

Animated SVG, circle stroke hover

Looking to mimic the animated arrow:
http://uve.info/
On hover the stroke overlays the circle, I have the shape created in Illustrator, thats fine, positioning easy. just animating the stroke.
HTML (Inline SVG):
<svg id="right_arrow" class="direction__right direction__item" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px" viewBox="0 0 80 80" xml:space="preserve">
<polygon class="ring offset-colour" points="32.5,52 47.5,40 32.5,28"/>
<path class="arrow offset-colour" d="M40,1c21.5,0,39,17.5,39,39S61.5,79,40,79S1,61.5,1,40S18.5,1,40,1 M40,0C17.9,0,0,17.9,0,40s17.9,40,40,40s40-17.9,40-40S62.1,0,40,0L40,0z"/>
</svg>
The path, is a circle already. I want another path that sits on top of the current path to emulate the uve.info site. This whole animation is done via hover. This is what the arrow should look like mid animation proving a pain.
What would be the best way to invoke the stroke?
Thanks all.

If you're targeting somewhat modern browsers, I'd suggest using svg animations.
You can animate strokes by using a stroke-dasharray that has the length of your circle (2 * PI * r) and a dash offset of equal length. Play around with the animation values of your dash length and offset to create different effects.
Here's an example of how to do so.
.circle:hover {
/* calculate using: (2 * PI * R) */
stroke-dasharray: 227;
stroke-dashoffset: 0;
animation-iteration-count: infinite;
animation-name: rotate;
animation-duration: 2s;
animation-direction: alternate;
animation-timing-function: linear;
}
#keyframes rotate {
to {
stroke-dashoffset: 227;
}
}
<svg id="right_arrow" class="direction__right direction__item" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px" viewBox="0 0 80 80" xml:space="preserve">
<polygon class="ring offset-colour" points="32.5,52 47.5,40 32.5,28" />
<circle cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="2" />
<circle class="circle" cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="4" />
</svg>
Using the css animation property and #keyframes, you can do all kinds of fancy stuff. If you'd rather keep it simple, you could also try using the transition property, like in the example below. Note that I've used the svg transform attribute to change the starting point of the dashed stroke.
.another-circle {
stroke-dasharray: 227;
stroke-dashoffset: 227;
transition: stroke-dashoffset 2s linear;
}
.another-circle:hover {
stroke-dashoffset: 0;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px" viewBox="0 0 80 80" xml:space="preserve">
<polygon class="ring offset-colour" points="32.5,52 47.5,40 32.5,28" />
<circle cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="2" />
<circle transform="rotate(-90 40 40)" class="another-circle" cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="4" />
</svg>