Reveal image on hovered SVG element

Reveal image on hovered SVG element - html

Here I've received an answer how to rewrite the skewed div fully with svg. Works perfectly. But I need a special effect, once the skewed div is hovered - reveal the image.
Here is a demonstration showing what I want to achieve with alpha channel.
And here is my markup with <image> tag and full svg.
The problem is that <image> is not revealed and, as I understand, the special attributes, as width & height should be provided into image tag.
I want to keep it responsive and everything centered.
css
.oblique-block g image {
opacity: 100%;
filter: alpha(opacity=100);
height: 100%;
z-index: 9999;
width: 458px;
}
.oblique-block a :hover.icon image {
z-index: 999;
opacity: 0.3;
filter: alpha(opacity=30);
max-width: none;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
.oblique-block {
width:100%;
height:100%;
}
.oblique-block text {
font-size:14px;
font-weight:bold;
fill:white;
text-anchor:middle;
}
markup with svg
.oblique-block g image {
opacity: 100%;
filter: alpha(opacity=100);
height: 100%;
z-index: 9999;
width: 458px;
}
.oblique-block a :hover.icon image {
z-index: 999;
opacity: 0.3;
filter: alpha(opacity=30);
max-width: none;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
.oblique-block {
width:100%;
height:100%;
}
.oblique-block text {
font-size:14px;
font-weight:bold;
fill:white;
text-anchor:middle;
}
<div class="oblique-block">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 671 208" preserveAspectRatio="xMinYMin meet">
<a href="#" title="Meet the creators" target="_self">
<g class="icon">
<path scale(0.8)="" id="p1" fill="#65C6CC" d="M 5,3 H 150 L 120,203 H 5 Z"></path>
<!-- icon supervisor -->
<path class="icon" fill="white" fill-rule="evenodd" clip-rule="evenodd" d="M15 3.92883C10.4897 3.92883 6.83337 7.58517 6.83337 12.0955C6.83337 16.6058 10.4897 20.2622 15 20.2622C19.5104 20.2622 23.1667 16.6058 23.1667 12.0955C23.1667 7.58517 19.5104 3.92883 15 3.92883ZM9.83337 12.0955C9.83337 9.24203 12.1466 6.92883 15 6.92883C17.8535 6.92883 20.1667 9.24203 20.1667 12.0955C20.1667 14.949 17.8535 17.2622 15 17.2622C12.1466 17.2622 9.83337 14.949 9.83337 12.0955ZM8.33329 23.9288C3.82297 23.9288 0.166626 27.5852 0.166626 32.0955V35.4288C0.166626 36.2573 0.838199 36.9288 1.66663 36.9288C2.49505 36.9288 3.16663 36.2573 3.16663 35.4288V32.0955C3.16663 29.242 5.47982 26.9288 8.33329 26.9288H21.6666C24.5201 26.9288 26.8333 29.242 26.8333 32.0955V35.4288C26.8333 36.2573 27.5049 36.9288 28.3333 36.9288C29.1617 36.9288 29.8333 36.2573 29.8333 35.4288V32.0955C29.8333 27.5852 26.1769 23.9288 21.6666 23.9288H8.33329ZM31.881 25.2705C32.0881 24.4684 32.9063 23.986 33.7084 24.1931C37.3119 25.1236 39.8306 28.3727 39.8334 32.0944V32.0955V35.4288C39.8334 36.2573 39.1618 36.9288 38.3334 36.9288C37.5049 36.9288 36.8334 36.2573 36.8334 35.4288V32.0966V32.0963C36.8315 29.7419 35.2381 27.6865 32.9584 27.0979C32.1563 26.8908 31.6739 26.0726 31.881 25.2705ZM27.0387 4.19238C26.2361 3.9869 25.419 4.47091 25.2135 5.27345C25.008 6.07599 25.492 6.89315 26.2946 7.09863C28.5807 7.68398 30.1797 9.74395 30.1797 12.1038C30.1797 14.4637 28.5807 16.5237 26.2946 17.109C25.492 17.3145 25.008 18.1317 25.2135 18.9342C25.419 19.7368 26.2361 20.2208 27.0387 20.0153C30.6523 19.0901 33.1797 15.834 33.1797 12.1038C33.1797 8.3737 30.6523 5.1176 27.0387 4.19238ZM41.3115 25.2704C41.5187 24.4683 42.3368 23.986 43.1389 24.1931C46.7425 25.1235 49.2611 28.3726 49.2639 32.0943V32.0954V35.4288C49.2639 36.2572 48.5923 36.9288 47.7639 36.9288C46.9355 36.9288 46.2639 36.2572 46.2639 35.4288V32.0966V32.0963C46.262 29.7418 44.6686 27.6864 42.3889 27.0978C41.5868 26.8907 41.1044 26.0726 41.3115 25.2704ZM36.4696 4.19244C35.6671 3.98696 34.8499 4.47097 34.6444 5.27351C34.4389 6.07605 34.9229 6.89321 35.7255 7.09869C38.0116 7.68404 39.6106 9.74402 39.6106 12.1039C39.6106 14.4638 38.0116 16.5238 35.7255 17.1091C34.9229 17.3146 34.4389 18.1318 34.6444 18.9343C34.8499 19.7368 35.6671 20.2208 36.4696 20.0154C40.0832 19.0901 42.6106 15.834 42.6106 12.1039C42.6106 8.37376 40.0832 5.11767 36.4696 4.19244Z" fill-opacity="0.9" transform="scale(0.5) translate(130 130)"></path>
<text x="70" y="130">
MEET
<tspan x="65" y="150"> THE CREATERS </tspan>
</text>
</g>
<a></a>
<a href="#" title="Cars that found homes" target="_self">
<g class="icon">
<image xlink:href="https://picsum.photos/200/300" x="0" y="0"></image>
<path id="p2" fill="#E0AD51" d="M 150,3 H 285 L 255,203 H 120 Z"></path>
<!-- icon alarm -->
<path fill="white" fill-rule="evenodd" clip-rule="evenodd" d="M20 2.25958C9.96681 2.25958 1.83331 10.3931 1.83331 20.4263C1.83331 30.4594 9.96681 38.5929 20 38.5929C30.0332 38.5929 38.1666 30.4594 38.1666 20.4263C38.1666 10.3931 30.0332 2.25958 20 2.25958ZM4.83331 20.4263C4.83331 12.0499 11.6237 5.25958 20 5.25958C28.3763 5.25958 35.1666 12.0499 35.1666 20.4263C35.1666 28.8026 28.3763 35.5929 20 35.5929C11.6237 35.5929 4.83331 28.8026 4.83331 20.4263ZM21.5 10.4263C21.5 9.59784 20.8284 8.92627 20 8.92627C19.1716 8.92627 18.5 9.59784 18.5 10.4263V20.4263C18.5 20.8241 18.658 21.2056 18.9393 21.4869L23.9393 26.4869C24.5251 27.0727 25.4749 27.0727 26.0607 26.4869C26.6464 25.9011 26.6464 24.9514 26.0607 24.3656L21.5 19.8049V10.4263Z" fill-opacity="0.9" transform="scale(0.5) translate(390 130)"></path>
<text x="200" y="130">
CARS THAT
<tspan x="195" y="150"> FOUND HOMES </tspan>
</text>
</g>
</a>
<a href="#" title="Check out the “a”list" target="_self">
<g class="icon">
<image xlink:href="https://picsum.photos/200/300"></image>
<path id="p3" fill="#329FA4" d="M 285,3 H 425 L 390,203 H 255 Z"></path>
<!-- icon favorite -->
<path fill="white" fill-rule="evenodd" clip-rule="evenodd" d="M20.7062 7.06419C22.7067 5.06288 25.4204 3.93848 28.2502 3.93848C31.08 3.93848 33.7939 5.06297 35.7944 7.06444C37.7956 9.06493 38.9199 11.7786 38.9199 14.6082C38.9199 17.4379 37.7955 20.1517 35.7942 22.1522C35.7941 22.1523 35.7943 22.1521 35.7942 22.1522L21.0608 36.8855C20.7795 37.1668 20.398 37.3249 20.0002 37.3249C19.6024 37.3249 19.2208 37.1668 18.9395 36.8855L4.20618 22.1522C0.0397515 17.9857 0.0397522 11.2306 4.20618 7.06419C8.37262 2.89776 15.1277 2.89776 19.2942 7.06419L20.0002 7.7702L20.7062 7.06419C20.7061 7.06428 20.7063 7.06411 20.7062 7.06419ZM28.2502 6.93848C26.2162 6.93848 24.2656 7.74671 22.8277 9.18526L21.0608 10.9522C20.7795 11.2335 20.398 11.3915 20.0002 11.3915C19.6024 11.3915 19.2208 11.2335 18.9395 10.9522L17.1728 9.18551C14.178 6.19065 9.32236 6.19065 6.3275 9.18551C3.33265 12.1804 3.33264 17.036 6.3275 20.0309L20.0002 33.7035L33.6728 20.0309C35.1114 18.593 35.9199 16.6421 35.9199 14.6082C35.9199 12.5742 35.1117 10.6236 33.6731 9.18576C32.2352 7.7472 30.2841 6.93848 28.2502 6.93848Z" fill-opacity="0.9" transform="scale(0.5) translate(660 130)"></path>
<text x="330" y="130">
CHECK OUT
<tspan x="325" y="150"> THE `A` LIST </tspan>
</text>
</g>
</a>
<a href="#" title="Drive into the adventure" target="_self">
<g class="icon">
<image xlink:href="https://picsum.photos/200/300" x="0" y="0"></image>
<path id="p4" fill="#E0AD51" d="M 425,3 H 560 L 525,203 H 390 L 425,3"></path>
<!-- icon map -->
<path transform="translate(460 50)" fill="white" fill-rule="evenodd" clip-rule="evenodd" d="M13.3288 2.26972C13.0498 2.27054 12.7888 2.34752 12.5653 2.48096L0.922479 9.13402C0.455116 9.40108 0.166687 9.8981 0.166687 10.4364V37.1031C0.166687 37.6378 0.451325 38.132 0.913797 38.4004C1.37627 38.6688 1.94664 38.6707 2.4109 38.4054L13.3806 32.137L25.9681 38.4308C26.1767 38.5408 26.4144 38.6031 26.6667 38.6031C26.9474 38.6031 27.21 38.526 27.4347 38.3918L39.0776 31.7387C39.5449 31.4717 39.8334 30.9747 39.8334 30.4364V3.76971C39.8334 3.23501 39.5487 2.74073 39.0862 2.47235C38.6238 2.20397 38.0534 2.20206 37.5891 2.46735L26.6195 8.73573L14.0304 2.44117C13.8256 2.3335 13.5929 2.2718 13.3459 2.26977L13.3333 2.26971L13.3288 2.26972ZM28.1667 34.5183L36.8334 29.5659V6.35448L28.1667 11.3069V34.5183ZM25.1667 11.3634L14.8333 6.19675V29.5093L25.1667 34.676V11.3634ZM3.16669 11.3069L11.8333 6.35451V29.5659L3.16669 34.5183V11.3069Z" fill-opacity="0.9"></path>
<path d="M0 0h24v24H0z" fill="none"></path>
<text x="470" y="130">
DRIVE INTO
<tspan x="465" y="150"> THE ADVENTURE </tspan>
</text>
</g>
</a>
<a href="#" title="Get in touch with us" target="_self">
<g class="icon">
<path id="p5" fill="#65C6CC" d="M 560,3 H 670 V 203 H 525 Z"></path>
<!-- chat -->
<path transform="translate(585 50)" fill="white" fill-rule="evenodd" clip-rule="evenodd" d="M20.8294 6.9467C18.8659 6.94158 16.9289 7.40033 15.1763 8.2856L15.1706 8.28847C10.8798 10.4329 8.16852 14.8171 8.16667 19.614L8.16666 19.6173C8.16154 21.5808 8.6203 23.5178 9.50557 25.2704C9.68588 25.6274 9.71617 26.0416 9.58969 26.421L7.37171 33.075L14.0257 30.857C14.4051 30.7305 14.8193 30.7608 15.1763 30.9411C16.9289 31.8264 18.8659 32.2852 20.8294 32.28L20.8328 32.28C25.6296 32.2782 30.0138 29.5669 32.1582 25.2761L32.1611 25.2704C33.0464 23.5178 33.5051 21.5808 33.5 19.6173L33.5 19.6134V18.8225C33.1269 12.4251 28.0216 7.31974 21.6242 6.9467H20.8333L20.8294 6.9467ZM36.5 19.611C36.5061 22.0455 35.9374 24.447 34.8403 26.6203C32.1877 31.9249 26.7671 35.2769 20.8362 35.28L20.8339 35.28L20.8372 35.28L20.8362 35.28C18.6135 35.2857 16.4182 34.8122 14.3991 33.8948C10.9138 35.0566 5.47434 36.8697 5.47434 36.8697C4.93534 37.0494 4.34109 36.9091 3.93934 36.5074C3.53759 36.1056 3.39731 35.5114 3.57698 34.9724L6.55189 26.0476C5.63459 24.0287 5.16111 21.8336 5.16667 19.6111L5.16667 19.6128L5.16667 19.6095L5.16667 19.6111C5.16959 13.6799 8.52173 8.25896 13.8266 5.60635L13.8237 5.60781L13.8294 5.60495L13.8266 5.60635C15.9997 4.50931 18.401 3.94067 20.8352 3.9467H21.6667C21.6942 3.9467 21.7218 3.94746 21.7493 3.94898C29.7057 4.38793 36.0588 10.741 36.4977 18.6974C36.4992 18.7249 36.5 18.7525 36.5 18.78V19.611Z" fill-opacity="0.9"></path>
<text x="605" y="130">
GET IN TOUCH
<tspan x="605" y="150"> WITH US </tspan>
</text>
</g>
</a>
</a></svg>
</div>

I would use only one path :#thePath and I would <use> this path as many times as required. This group can be translated to the needed position . The image stays underneath the <use> element and changes the fill-opacity from one to .7 (for example)
Also Y would use #thePath for a <clipPath> element. The image would be clipped by the <clipPath> element: style="clip-path:url(#clip2)"
Observation: for the text I'm using pointer-events:none;. This way the .overlay would stay semiopaque when I'm mousing over the text
.overlay {
fill-opacity: 1;
transition: 0.5s;
}
.overlay:hover {
fill-opacity: 0.7;
}
svg {
border: 1px solid;
}
.oblique-block text {
font-size: 14px;
font-weight: bold;
fill: white;
text-anchor: middle;
pointer-events:none;
}
<div class="oblique-block">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 671 208" preserveAspectRatio="xMinYMin meet">
<defs>
<clipPath id="clip2">
<path id="thePath" d="M30,3h135l-30,200h-135z"></path>
</clipPath>
</defs>
<g class="icon" transform="translate(120)">
<a href="#" title="Cars that found homes" target="_self">
<image xlink:href="https://picsum.photos/200/300" width="200" x="-16" height="250" style="clip-path:url(#clip2)" ></image>
<use class="overlay" xlink:href="#thePath" fill="#E0AD51" fill-opacity="1" />
<!-- icon alarm -->
<path fill="white" d="M20 2.25958C9.96681 2.25958 1.83331 10.3931 1.83331 20.4263C1.83331 30.4594 9.96681 38.5929 20 38.5929C30.0332 38.5929 38.1666 30.4594 38.1666 20.4263C38.1666 10.3931 30.0332 2.25958 20 2.25958ZM4.83331 20.4263C4.83331 12.0499 11.6237 5.25958 20 5.25958C28.3763 5.25958 35.1666 12.0499 35.1666 20.4263C35.1666 28.8026 28.3763 35.5929 20 35.5929C11.6237 35.5929 4.83331 28.8026 4.83331 20.4263ZM21.5 10.4263C21.5 9.59784 20.8284 8.92627 20 8.92627C19.1716 8.92627 18.5 9.59784 18.5 10.4263V20.4263C18.5 20.8241 18.658 21.2056 18.9393 21.4869L23.9393 26.4869C24.5251 27.0727 25.4749 27.0727 26.0607 26.4869C26.6464 25.9011 26.6464 24.9514 26.0607 24.3656L21.5 19.8049V10.4263Z" fill-opacity="0.9" transform="scale(0.5) translate(150 130)"></path>
<text x="80" y="130">
CARS THAT
<tspan x="75" y="150"> FOUND HOMES </tspan>
</text>
</a>
</g>
</svg>
</div>
And here is an example where I'm using the same structure 3 times with different transform translate values and different fill color:
.overlay {
fill-opacity: 1;
transition: 0.5s;
}
.overlay:hover {
fill-opacity: 0.7;
}
svg {
border: 1px solid;
}
.oblique-block text {
font-size: 14px;
font-weight: bold;
fill: white;
text-anchor: middle;
pointer-events:none;
}
<div class="oblique-block">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 671 208" preserveAspectRatio="xMinYMin meet">
<defs>
<clipPath id="clip1">
<path id="thePathFirst" d="M 5,3 H 150 L 120,203 H 5 Z"></path>
</clipPath>
<clipPath id="clip2">
<path id="thePath" d="M30,3h135l-30,200h-135z"></path>
</clipPath>
<clipPath id="clip3">
<path id="thePathLast" d="M30,3h135v200h-165z"></path>
</clipPath>
</defs>
<g class="icon" transform="translate(0)">
<a href="#" title="Cars that found homes" target="_self">
<image xlink:href="https://picsum.photos/200/300" width="200" x="-16" height="250" style="clip-path:url(#clip1)" ></image>
<use xlink:href="#thePathFirst" class="overlay" fill="#65C6CC" />
<!-- icon alarm -->
<path fill="white" d="M15 3.92883C10.4897 3.92883 6.83337 7.58517 6.83337 12.0955C6.83337 16.6058 10.4897 20.2622 15 20.2622C19.5104 20.2622 23.1667 16.6058 23.1667 12.0955C23.1667 7.58517 19.5104 3.92883 15 3.92883ZM9.83337 12.0955C9.83337 9.24203 12.1466 6.92883 15 6.92883C17.8535 6.92883 20.1667 9.24203 20.1667 12.0955C20.1667 14.949 17.8535 17.2622 15 17.2622C12.1466 17.2622 9.83337 14.949 9.83337 12.0955ZM8.33329 23.9288C3.82297 23.9288 0.166626 27.5852 0.166626 32.0955V35.4288C0.166626 36.2573 0.838199 36.9288 1.66663 36.9288C2.49505 36.9288 3.16663 36.2573 3.16663 35.4288V32.0955C3.16663 29.242 5.47982 26.9288 8.33329 26.9288H21.6666C24.5201 26.9288 26.8333 29.242 26.8333 32.0955V35.4288C26.8333 36.2573 27.5049 36.9288 28.3333 36.9288C29.1617 36.9288 29.8333 36.2573 29.8333 35.4288V32.0955C29.8333 27.5852 26.1769 23.9288 21.6666 23.9288H8.33329ZM31.881 25.2705C32.0881 24.4684 32.9063 23.986 33.7084 24.1931C37.3119 25.1236 39.8306 28.3727 39.8334 32.0944V32.0955V35.4288C39.8334 36.2573 39.1618 36.9288 38.3334 36.9288C37.5049 36.9288 36.8334 36.2573 36.8334 35.4288V32.0966V32.0963C36.8315 29.7419 35.2381 27.6865 32.9584 27.0979C32.1563 26.8908 31.6739 26.0726 31.881 25.2705ZM27.0387 4.19238C26.2361 3.9869 25.419 4.47091 25.2135 5.27345C25.008 6.07599 25.492 6.89315 26.2946 7.09863C28.5807 7.68398 30.1797 9.74395 30.1797 12.1038C30.1797 14.4637 28.5807 16.5237 26.2946 17.109C25.492 17.3145 25.008 18.1317 25.2135 18.9342C25.419 19.7368 26.2361 20.2208 27.0387 20.0153C30.6523 19.0901 33.1797 15.834 33.1797 12.1038C33.1797 8.3737 30.6523 5.1176 27.0387 4.19238ZM41.3115 25.2704C41.5187 24.4683 42.3368 23.986 43.1389 24.1931C46.7425 25.1235 49.2611 28.3726 49.2639 32.0943V32.0954V35.4288C49.2639 36.2572 48.5923 36.9288 47.7639 36.9288C46.9355 36.9288 46.2639 36.2572 46.2639 35.4288V32.0966V32.0963C46.262 29.7418 44.6686 27.6864 42.3889 27.0978C41.5868 26.8907 41.1044 26.0726 41.3115 25.2704ZM36.4696 4.19244C35.6671 3.98696 34.8499 4.47097 34.6444 5.27351C34.4389 6.07605 34.9229 6.89321 35.7255 7.09869C38.0116 7.68404 39.6106 9.74402 39.6106 12.1039C39.6106 14.4638 38.0116 16.5238 35.7255 17.1091C34.9229 17.3146 34.4389 18.1318 34.6444 18.9343C34.8499 19.7368 35.6671 20.2208 36.4696 20.0154C40.0832 19.0901 42.6106 15.834 42.6106 12.1039C42.6106 8.37376 40.0832 5.11767 36.4696 4.19244Z" fill-opacity="0.9" transform="scale(0.5) translate(150 130)"></path>
<text x="80" y="130">
CARS THAT
<tspan x="75" y="150"> FOUND HOMES </tspan>
</text>
</a>
</g>
<g class="icon" transform="translate(120)">
<a href="#" title="Cars that found homes" target="_self">
<image xlink:href="https://picsum.photos/200/300" width="200" x="-16" height="250" style="clip-path:url(#clip2)" ></image>
<use class="overlay" xlink:href="#thePath" fill="#E0AD51" fill-opacity="1" />
<!-- icon alarm -->
<path fill="white" d="M20 2.25958C9.96681 2.25958 1.83331 10.3931 1.83331 20.4263C1.83331 30.4594 9.96681 38.5929 20 38.5929C30.0332 38.5929 38.1666 30.4594 38.1666 20.4263C38.1666 10.3931 30.0332 2.25958 20 2.25958ZM4.83331 20.4263C4.83331 12.0499 11.6237 5.25958 20 5.25958C28.3763 5.25958 35.1666 12.0499 35.1666 20.4263C35.1666 28.8026 28.3763 35.5929 20 35.5929C11.6237 35.5929 4.83331 28.8026 4.83331 20.4263ZM21.5 10.4263C21.5 9.59784 20.8284 8.92627 20 8.92627C19.1716 8.92627 18.5 9.59784 18.5 10.4263V20.4263C18.5 20.8241 18.658 21.2056 18.9393 21.4869L23.9393 26.4869C24.5251 27.0727 25.4749 27.0727 26.0607 26.4869C26.6464 25.9011 26.6464 24.9514 26.0607 24.3656L21.5 19.8049V10.4263Z" fill-opacity="0.9" transform="scale(0.5) translate(150 130)"></path>
<text x="80" y="130">
CARS THAT
<tspan x="75" y="150"> FOUND HOMES </tspan>
</text>
</a>
</g>
<g class="icon" transform="translate(255)">
<a href="#" title="Cars that found homes" target="_self">
<image xlink:href="https://picsum.photos/200/300" width="200" x="-16" height="250" style="clip-path:url(#clip2)" ></image>
<use class="overlay" xlink:href="#thePath" fill="#65C6CC" fill-opacity="1" />
<!-- icon alarm -->
<path fill="white" d="M20.7062 7.06419C22.7067 5.06288 25.4204 3.93848 28.2502 3.93848C31.08 3.93848 33.7939 5.06297 35.7944 7.06444C37.7956 9.06493 38.9199 11.7786 38.9199 14.6082C38.9199 17.4379 37.7955 20.1517 35.7942 22.1522C35.7941 22.1523 35.7943 22.1521 35.7942 22.1522L21.0608 36.8855C20.7795 37.1668 20.398 37.3249 20.0002 37.3249C19.6024 37.3249 19.2208 37.1668 18.9395 36.8855L4.20618 22.1522C0.0397515 17.9857 0.0397522 11.2306 4.20618 7.06419C8.37262 2.89776 15.1277 2.89776 19.2942 7.06419L20.0002 7.7702L20.7062 7.06419C20.7061 7.06428 20.7063 7.06411 20.7062 7.06419ZM28.2502 6.93848C26.2162 6.93848 24.2656 7.74671 22.8277 9.18526L21.0608 10.9522C20.7795 11.2335 20.398 11.3915 20.0002 11.3915C19.6024 11.3915 19.2208 11.2335 18.9395 10.9522L17.1728 9.18551C14.178 6.19065 9.32236 6.19065 6.3275 9.18551C3.33265 12.1804 3.33264 17.036 6.3275 20.0309L20.0002 33.7035L33.6728 20.0309C35.1114 18.593 35.9199 16.6421 35.9199 14.6082C35.9199 12.5742 35.1117 10.6236 33.6731 9.18576C32.2352 7.7472 30.2841 6.93848 28.2502 6.93848Z" fill-opacity="0.9" transform="scale(0.5) translate(150 130)"></path>
<text x="80" y="130">
CARS THAT
<tspan x="75" y="150"> FOUND HOMES </tspan>
</text>
</a>
</g>
<g class="icon" transform="translate(390)">
<a href="#" title="Cars that found homes" target="_self">
<image xlink:href="https://picsum.photos/200/300" width="200" x="-16" height="250" style="clip-path:url(#clip2)" ></image>
<use class="overlay" xlink:href="#thePath" fill="#E0AD51" fill-opacity="1" />
<!-- icon alarm -->
<path fill="white" d="M13.3288 2.26972C13.0498 2.27054 12.7888 2.34752 12.5653 2.48096L0.922479 9.13402C0.455116 9.40108 0.166687 9.8981 0.166687 10.4364V37.1031C0.166687 37.6378 0.451325 38.132 0.913797 38.4004C1.37627 38.6688 1.94664 38.6707 2.4109 38.4054L13.3806 32.137L25.9681 38.4308C26.1767 38.5408 26.4144 38.6031 26.6667 38.6031C26.9474 38.6031 27.21 38.526 27.4347 38.3918L39.0776 31.7387C39.5449 31.4717 39.8334 30.9747 39.8334 30.4364V3.76971C39.8334 3.23501 39.5487 2.74073 39.0862 2.47235C38.6238 2.20397 38.0534 2.20206 37.5891 2.46735L26.6195 8.73573L14.0304 2.44117C13.8256 2.3335 13.5929 2.2718 13.3459 2.26977L13.3333 2.26971L13.3288 2.26972ZM28.1667 34.5183L36.8334 29.5659V6.35448L28.1667 11.3069V34.5183ZM25.1667 11.3634L14.8333 6.19675V29.5093L25.1667 34.676V11.3634ZM3.16669 11.3069L11.8333 6.35451V29.5659L3.16669 34.5183V11.3069Z" fill-opacity="0.9" transform="scale(0.5) translate(150 130)"></path>
<text x="80" y="130">
CARS THAT
<tspan x="75" y="150"> FOUND HOMES </tspan>
</text>
</a>
</g>
<g class="icon" transform="translate(525)">
<a href="#" title="Cars that found homes" target="_self">
<image xlink:href="https://picsum.photos/200/300" width="200" x="-16" height="250" style="clip-path:url(#clip3)" ></image>
<use xlink:href="#thePathLast" class="overlay" fill="#65C6CC" />
<!-- icon alarm -->
<path fill="white" d="M20.8294 6.9467C18.8659 6.94158 16.9289 7.40033 15.1763 8.2856L15.1706 8.28847C10.8798 10.4329 8.16852 14.8171 8.16667 19.614L8.16666 19.6173C8.16154 21.5808 8.6203 23.5178 9.50557 25.2704C9.68588 25.6274 9.71617 26.0416 9.58969 26.421L7.37171 33.075L14.0257 30.857C14.4051 30.7305 14.8193 30.7608 15.1763 30.9411C16.9289 31.8264 18.8659 32.2852 20.8294 32.28L20.8328 32.28C25.6296 32.2782 30.0138 29.5669 32.1582 25.2761L32.1611 25.2704C33.0464 23.5178 33.5051 21.5808 33.5 19.6173L33.5 19.6134V18.8225C33.1269 12.4251 28.0216 7.31974 21.6242 6.9467H20.8333L20.8294 6.9467ZM36.5 19.611C36.5061 22.0455 35.9374 24.447 34.8403 26.6203C32.1877 31.9249 26.7671 35.2769 20.8362 35.28L20.8339 35.28L20.8372 35.28L20.8362 35.28C18.6135 35.2857 16.4182 34.8122 14.3991 33.8948C10.9138 35.0566 5.47434 36.8697 5.47434 36.8697C4.93534 37.0494 4.34109 36.9091 3.93934 36.5074C3.53759 36.1056 3.39731 35.5114 3.57698 34.9724L6.55189 26.0476C5.63459 24.0287 5.16111 21.8336 5.16667 19.6111L5.16667 19.6128L5.16667 19.6095L5.16667 19.6111C5.16959 13.6799 8.52173 8.25896 13.8266 5.60635L13.8237 5.60781L13.8294 5.60495L13.8266 5.60635C15.9997 4.50931 18.401 3.94067 20.8352 3.9467H21.6667C21.6942 3.9467 21.7218 3.94746 21.7493 3.94898C29.7057 4.38793 36.0588 10.741 36.4977 18.6974C36.4992 18.7249 36.5 18.7525 36.5 18.78V19.611Z" fill-opacity="0.9" transform="scale(0.5) translate(150 130)"></path>
<text x="80" y="130">
CARS THAT
<tspan x="75" y="150"> FOUND HOMES </tspan>
</text>
</a>
</g>
</svg>
</div>

Related

Shifting SVG by fixed number of pixels

The SVG example currently visually looks perfect except I want to achieve the same result without padding.
The padding's purpose is to force the red/blue lines 40px to the right to make space for the axis whilst also stopping it from overflowing on the right side of the graph.
I'm trying to remove the padding, but then I need to find a new way to shift JUST the "lines" 40px to the right without using x="40px" width="calc(100% - 40px)" because this syntax also isn't compatible with Sharp, or older browsers.
Is there any way to remove the padding and shift the lines 40px right whilst also constraining it within the box model of the SVG?
(final note: I don't want to use 'responsive' units in any logic that moves the lines)
JSFiddle of line graph: https://jsfiddle.net/Lefsqo3j/14/
<div style="height:148px;width:300px;overflow:hidden;resize:both">
<svg overflow="visible" style="padding:24px 0px 24px 40px" height="100%" width="100%">
<svg role="img" viewBox="0 0 300 100" preserveAspectRatio="none">
<svg viewBox="0 0 300 100" preserveAspectRatio="none">
<line y1="0" y2="100" x1="0" x2="0" stroke-width="0.2" stroke="black"></line>
<line y1="0" y2="100" x1="75" x2="75" stroke-width="0.2" stroke="black"></line>
<line y1="0" y2="100" x1="150" x2="150" stroke-width="0.2" stroke="black"></line>
<line y1="0" y2="100" x1="225" x2="225" stroke-width="0.2" stroke="black"></line>
<line y1="0" y2="100" x1="300" x2="300" stroke-width="0.2" stroke="black"></line>
<line x1="0" x2="300" y1="0" y2="0" stroke-width="0.2" stroke="black"></line>
<line x1="0" x2="300" y1="25" y2="25" stroke-width="0.2" stroke="black"></line>
<line x1="0" x2="300" y1="50" y2="50" stroke-width="0.2" stroke="black"></line>
<line x1="0" x2="300" y1="75" y2="75" stroke-width="0.2" stroke="black"></line>
<line x1="0" x2="300" y1="100" y2="100" stroke-width="0.2" stroke="black"></line>
</svg>
</svg>
<svg x="100%" overflow="visible">
<text text-anchor="end" dy="-8px">
<tspan fill="red"> ⬤</tspan>
Line A<tspan fill="blue"> ⬤</tspan>
Line B
</text>
</svg>
<svg viewBox="0 0 300 100" preserveAspectRatio="none">
<path
d="M 0 75 M 0 75 L 75 50 L 150 15 L 225 67 L 300 67 L 300 67"
stroke-width="3"
stroke="red"
fill="transparent"
vector-effect="non-scaling-stroke"
></path>
<path
d="M 0 92 M 0 92 L 75 72 L 150 80 L 225 50 L 300 50 L 300 50"
stroke-width="3"
stroke="blue"
fill="transparent"
></path>
</svg>
<svg overflow="visible">
<text x="0%" text-anchor="end" y="0%">
40
</text>
<text x="0%" text-anchor="end" y="25%">
30
</text>
<text x="0%" text-anchor="end" y="50%">
20
</text>
<text x="0%" text-anchor="end" y="75%">
10
</text>
<text x="0%" text-anchor="end" y="100%">
0
</text>
<g style="transform: translateX(0%);">
<text y="100%" dy="16px">
5
</text>
</g>
<g style="transform: translateX(25%);">
<text y="100%" dy="16px">
10
</text>
</g>
<g style="transform: translateX(50%); ">
<text y="100%" dy="16px">
15
</text>
</g>
<g style="transform: translateX(75%); ">
<text y="100%" dy="16px">
20
</text>
</g>
<g text-anchor="end" style="transform: translateX(100%);">
<text y="100%" dy="16px">
25
</text>
</g>
</svg>
</svg>
</div>

I've modified the SVG and brought the content inside the content box. Dimensions scale uniformly maintaining aspect ratio.
<div style="height:148px;
width:300px;
overflow:hidden;
resize:both;
background-color: wheat;
">
<svg class="chart" overflow="visible">
<style>
.chart {
width: 100%;
height: 100%;
font-size: 14px;
padding-bottom: 24px;
}
/* background color for entire chart */
.chart-background {
fill: rgb(230, 249, 255);
}
/* styling for only the graph part */
.graph {
background-color: transparent;
}
/* grid lines style */
.chart .grid>line {
stroke-width: 0.5;
stroke: green;
}
.legend {
background-color: wheat;
}
.labels {
background-color: transparent !important;
}
.back {
background-color: wheat;
}
</style>
<rect class="chart-background" height="100%" width="100%" />
<svg viewBox="0 0 340 140" x="40" y="24" preserveAspectRatio="none">
<g class="grid">
<line y1="0" y2="100" x1="0" x2="0"></line>
<line y1="0" y2="100" x1="75" x2="75"></line>
<line y1="0" y2="100" x1="150" x2="150"></line>
<line y1="0" y2="100" x1="225" x2="225"></line>
<line y1="0" y2="100" x1="300" x2="300"></line>
<line x1="0" x2="300" y1="0" y2="0"></line>
<line x1="0" x2="300" y1="25" y2="25"></line>
<line x1="0" x2="300" y1="50" y2="50"></line>
<line x1="0" x2="300" y1="75" y2="75"></line>
<line x1="0" x2="300" y1="100" y2="100"></line>
</g>
</svg>
<svg>
<g class="legend">
<text x="100%" text-anchor="end" dy="16">
<tspan fill="red"> ⬤</tspan>Line A<tspan fill="blue"> ⬤</tspan>Line B
</text>
</g>
</svg>
<svg overflow="visible" x="40" y="24" height="70%" width="88%" style="margin-bottom: 24px;">
<g class="labels" style="font-size: 12px;">
<text x="0%" text-anchor="end" y="0%">40</text>
<text x="0%" text-anchor="end" y="25%">30</text>
<text x="0%" text-anchor="end" y="50%">20</text>
<text x="0%" text-anchor="end" y="75%">10</text>
<text x="0%" text-anchor="end" y="100%">0</text>
<text y="100%" dy="16px">5</text>
<text y="100%" dy="16px" x="22%">10</text>
<text y="100%" dy="16px" x="48%">15</text>
<text y="100%" dy="16px" x="74%">20</text>
<text y="100%" dy="16px" dx="-20px" x="100%">25</text>
</g>
</svg>
<svg viewBox="0 0 340 140" x="40" y="24" preserveAspectRatio="none">
<g class="plot">
<path d="M 0 75 M 0 75 L 75 50 L 150 15 L 225 67 L 300 67 L 300 67" stroke-width="3" stroke="red"
fill="transparent" vector-effect="non-scaling-stroke"></path>
<path d="M 0 92 M 0 92 L 75 72 L 150 80 L 225 50 L 300 50 L 300 50" stroke-width="3" stroke="blue"
fill="transparent"></path>
</g>
</svg>
</svg>
</div>
Sharpjs:
const svgBuffer = Buffer.from(svgImage);
const image = await sharp(svgBuffer, {})
.resize({ width: 500, fit: sharp.fit.inside, position: 'centre' })
.toFile('e:/svg-image.png');
Old answer
We can wrap the original svg content in a new <svg> tag. And with custom styles the original svg can be positioned such that overflow will be visible:
const sharp = require('sharp');
async function svgToImage(svgImage) {
try {
const wrapped = `<svg id='wrapper' width="600" height="400">
<style>
#wrapper > svg{
transform: scale(.9) translate(25px, 25px) ;
}
</style>
${svgImage}
</svg>`;
const svgBuffer = Buffer.from(wrapped);
//const image = await sharp(svgBuffer, {}).resize(500).toFile('e:/svg-image.png');
const image = await sharp({
create: {
width: 600,
height: 400,
channels: 4,
background: { r: 220, g: 255, b: 220, alpha: 1 },
},
})
.composite([{ input: svgBuffer, top: 0, left: 0 }])
.png()
.toFile('e:/svg-image.png');
} catch (error) {
console.log(error);
}
}
const svgImage = `
<svg overflow="visible" style="padding:24px 0px 24px 40px">
<svg role="img" viewBox="0 0 300 100" preserveAspectRatio="none">
<svg viewBox="0 0 300 100" preserveAspectRatio="none">
<line y1="0" y2="100" x1="0" x2="0" stroke-width="0.2" stroke="black"></line>
<line y1="0" y2="100" x1="75" x2="75" stroke-width="0.2" stroke="black"></line>
<line y1="0" y2="100" x1="150" x2="150" stroke-width="0.2" stroke="black"></line>
<line y1="0" y2="100" x1="225" x2="225" stroke-width="0.2" stroke="black"></line>
<line y1="0" y2="100" x1="300" x2="300" stroke-width="0.2" stroke="black"></line>
<line x1="0" x2="300" y1="0" y2="0" stroke-width="0.2" stroke="black"></line>
<line x1="0" x2="300" y1="25" y2="25" stroke-width="0.2" stroke="black"></line>
<line x1="0" x2="300" y1="50" y2="50" stroke-width="0.2" stroke="black"></line>
<line x1="0" x2="300" y1="75" y2="75" stroke-width="0.2" stroke="black"></line>
<line x1="0" x2="300" y1="100" y2="100" stroke-width="0.2" stroke="black"></line>
</svg>
</svg>
<svg x="100%" overflow="visible">
<text text-anchor="end" dy="-8px">
<tspan fill="red"> ⬤</tspan>
Line A<tspan fill="blue"> ⬤</tspan>
Line B
</text>
</svg>
<svg viewBox="0 0 300 100" preserveAspectRatio="none">
<path
d="M 0 75 M 0 75 L 75 50 L 150 15 L 225 67 L 300 67 L 300 67"
stroke-width="3"
stroke="red"
fill="transparent"
vector-effect="non-scaling-stroke"
></path>
<path
d="M 0 92 M 0 92 L 75 72 L 150 80 L 225 50 L 300 50 L 300 50"
stroke-width="3"
stroke="blue"
fill="transparent"
></path>
</svg>
<svg overflow="visible">
<text x="0%" text-anchor="end" y="0%">40</text>
<text x="0%" text-anchor="end" y="25%">30</text>
<text x="0%" text-anchor="end" y="50%">20</text>
<text x="0%" text-anchor="end" y="75%">10</text>
<text x="0%" text-anchor="end" y="100%">0</text>
<text y="100%" dy="16px">5</text>
<text y="100%" dy="16px" x="25%">10</text>
<text y="100%" dy="16px" x="50%">15</text>
<text y="100%" dy="16px" x="75%">20</text>
<text y="100%" dy="16px" x="100%">25</text>
</svg>
</svg>`;
svgToImage(svgImage);
Output:
On x axis the labels didn't behave because of bug and bug related to transform. So I had to modify the x label tags.

Facing problem while trying trying to rotate SVG animation

I'm a beginner in animation. I am trying to learn svg animation from the following piece of code.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewbox="50 70 200 200">
<path stroke="black" fill="none" d="M70,85H125V140H70V85Z" ></path>
<path d="M0,0 L-2.69,-4.95L0,-2.2L2.69,-4.95L0,0z" transform="rotate(-90)" style="fill: #ff0000;">
<animateMotion path="M70,85H125V140H70V85Z" dur="10s" rotate="auto" repeatCount="indefinite"></animateMotion>
</path>
<g>
<desc>white mask</desc>
<rect x="90" y="80" width="15" height="65" fill="white" />
<rect x="65" y="105" width="65" height="15" fill="white" />
</g>
</svg>
I'm tring to move the arrow to rotate in opposite direction (i.e anticlockwise) but unable to achieve that. I have tried to change the path but I'm stuck at this point.
Any help will be appreciated.

We can use keyTimes and keyPoints to run the animation backwards and alter the transform to rotate the arrow. See how the keyPoints go from 1 to 0.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewbox="50 70 200 200">
<path stroke="black" fill="none" d="M70,85H125V140H70V85Z" ></path>
<path d="M0,0 L-2.69,-4.95L0,-2.2L2.69,-4.95L0,0z" transform="rotate(90)" style="fill: #ff0000;">
<animateMotion keyPoints="1;0" keyTimes="0;1" path="M70,85H125V140H70V85Z" dur="10s" rotate="auto" repeatCount="indefinite"></animateMotion>
</path>
<g>
<desc>white mask</desc>
<rect x="90" y="80" width="15" height="65" fill="white" />
<rect x="65" y="105" width="65" height="15" fill="white" />
</g>
</svg>

How can I rotate this SVG element correctly?

I've been attempting to create a gauge with a range of 0 - 100. I have created this SVG element in Sketch and now I'm trying to get the rotation to work for the black needle.
To do this, I have tried playing around with transform-origin and transform: rotate() but I can't seem to get it to rotate like seen in the .gif as it always seems to get cut off. I have added a JS range slider for your convenience to demonstrate the issue. Here is also a codepen to experiment.
Could you help me achieve the desired result as seen in the gif?
$('#percent').on('change', function() {
$('#needle').css('transform', 'translate(175px, 19px) rotate(' + percentToDegrees($(this).val()) + 'deg)')
})
function percentToDegrees(percent) {
var degrees = -90;
var inc = 1.8;
return degrees += (percent * inc);
}
#needle {
transform-origin: 0% bottom;
transform: translate(175px, 19px) rotate(0);
}
input {
display: block;
margin: 50px auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg width="100%" height="177px" viewBox="0 0 385 177" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-15.000000, -224.000000)">
<g id="Group" transform="translate(15.000000, 220.000000)">
<g id="guage">
<path d="M84.8041871,178.856781 L84.8041871,179.169281 L25,179.169281 L25,178.669281 C25,119.519295 57.1931907,67.8894771 105.011512,40.3501901 L135,92.2989954 C105.009619,109.483749 84.8041871,141.810321 84.8041871,178.856781 Z" id="red" fill="#BD3632"></path>
<path d="M235.050803,92.4864742 C205.21439,75.1028089 167.169843,73.7652453 135.133157,92.2884751 L134.862916,92.4447251 L105,40.6455806 L105.432385,40.3955806 C156.58355,10.8205878 217.307001,12.8896752 265,40.5376689 L235.050803,92.4864742 L235.050803,92.4864742 Z" id="yellow" fill="#EEAF30"></path>
<path d="M235,92.2989954 L264.988488,40.3501901 C312.806809,67.8894771 345,119.519295 345,178.669281 L345,179.169281 L285.195813,179.169281 L285.195813,178.856781 C285.195813,141.810321 264.990381,109.483749 235,92.2989954 L235,92.2989954 Z" id="green" fill="#008542"></path>
<text id="100%" font-family="Omnes-Regular, Omnes" font-size="15" font-weight="normal" line-spacing="15" fill="#000000">
<tspan x="350" y="180">100%</tspan>
</text>
<text id="50%" font-family="Omnes-Regular, Omnes" font-size="15" font-weight="normal" fill="#000000">
<tspan x="171" y="14">50%</tspan>
</text>
<text id="0%" font-family="Omnes-Regular, Omnes" font-size="15" font-weight="normal" fill="#000000">
<tspan x="0" y="178">0%</tspan>
</text>
</g>
<g id="needle" transform="translate(175.000000, 19.000000)">
<polygon id="Triangle" fill="#3C3C3B" points="10 0 15 162 5 162"></polygon>
</g>
</g>
</g>
</g>
</svg>
<input type="range" id="percent" value="50" min="0" max="100">

Consider transform-box:fill-box; then make the origin bottom center and increase the viewbox a little to avoid the cut. I have also moved the rotation to the polygon and kept the translation on the g element.
$('#percent').on('change', function() {
$('#triangle').css('transform', 'rotate(' + percentToDegrees($(this).val()) + 'deg)')
})
function percentToDegrees(percent) {
var degrees = -90;
var inc = 1.8;
return degrees += (percent * inc);
}
#triangle {
transform-origin:center bottom;
transform-box:fill-box;
}
input {
display: block;
margin: 50px auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg width="100%" height="177px" viewBox="0 0 385 185" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-15.000000, -224.000000)">
<g id="Group" transform="translate(15.000000, 220.000000)">
<g id="guage">
<path d="M84.8041871,178.856781 L84.8041871,179.169281 L25,179.169281 L25,178.669281 C25,119.519295 57.1931907,67.8894771 105.011512,40.3501901 L135,92.2989954 C105.009619,109.483749 84.8041871,141.810321 84.8041871,178.856781 Z" id="red" fill="#BD3632"></path>
<path d="M235.050803,92.4864742 C205.21439,75.1028089 167.169843,73.7652453 135.133157,92.2884751 L134.862916,92.4447251 L105,40.6455806 L105.432385,40.3955806 C156.58355,10.8205878 217.307001,12.8896752 265,40.5376689 L235.050803,92.4864742 L235.050803,92.4864742 Z" id="yellow" fill="#EEAF30"></path>
<path d="M235,92.2989954 L264.988488,40.3501901 C312.806809,67.8894771 345,119.519295 345,178.669281 L345,179.169281 L285.195813,179.169281 L285.195813,178.856781 C285.195813,141.810321 264.990381,109.483749 235,92.2989954 L235,92.2989954 Z" id="green" fill="#008542"></path>
<text id="100%" font-family="Omnes-Regular, Omnes" font-size="15" font-weight="normal" line-spacing="15" fill="#000000">
<tspan x="350" y="180">100%</tspan>
</text>
<text id="50%" font-family="Omnes-Regular, Omnes" font-size="15" font-weight="normal" fill="#000000">
<tspan x="171" y="14">50%</tspan>
</text>
<text id="0%" font-family="Omnes-Regular, Omnes" font-size="15" font-weight="normal" fill="#000000">
<tspan x="0" y="178">0%</tspan>
</text>
</g>
<g id="needle" transform="translate(175.000000, 18.000000)">
<polygon id="triangle" fill="#3C3C3B" points="10 0 15 162 5 162"></polygon>
</g>
</g>
</g>
</g>
</svg>
<input type="range" id="percent" value="50" min="0" max="100">

The easiest is probably to do it all with SVG, simply setting your element's transform attribute instead of its css style.
All you need is to set the second and third values of the rotate(angle, origin_x, origin_y) SVG transform method.
$('#percent').on('input', function() {
$('#needle').attr('transform', 'translate(175, 19) ' +
'rotate(' + percentToDegrees($(this).val()) + ', 10, 162)')
})
function percentToDegrees(percent) {
var degrees = -90;
var inc = 1.8;
return degrees += (percent * inc);
}
input {
display: block;
margin: 50px auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg width="100%" height="177px" viewBox="0 0 385 177" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-15.000000, -224.000000)">
<g id="Group" transform="translate(15.000000, 220.000000)">
<g id="guage">
<path d="M84.8041871,178.856781 L84.8041871,179.169281 L25,179.169281 L25,178.669281 C25,119.519295 57.1931907,67.8894771 105.011512,40.3501901 L135,92.2989954 C105.009619,109.483749 84.8041871,141.810321 84.8041871,178.856781 Z" id="red" fill="#BD3632"></path>
<path d="M235.050803,92.4864742 C205.21439,75.1028089 167.169843,73.7652453 135.133157,92.2884751 L134.862916,92.4447251 L105,40.6455806 L105.432385,40.3955806 C156.58355,10.8205878 217.307001,12.8896752 265,40.5376689 L235.050803,92.4864742 L235.050803,92.4864742 Z" id="yellow" fill="#EEAF30"></path>
<path d="M235,92.2989954 L264.988488,40.3501901 C312.806809,67.8894771 345,119.519295 345,178.669281 L345,179.169281 L285.195813,179.169281 L285.195813,178.856781 C285.195813,141.810321 264.990381,109.483749 235,92.2989954 L235,92.2989954 Z" id="green" fill="#008542"></path>
<text id="100%" font-family="Omnes-Regular, Omnes" font-size="15" font-weight="normal" line-spacing="15" fill="#000000">
<tspan x="350" y="180">100%</tspan>
</text>
<text id="50%" font-family="Omnes-Regular, Omnes" font-size="15" font-weight="normal" fill="#000000">
<tspan x="171" y="14">50%</tspan>
</text>
<text id="0%" font-family="Omnes-Regular, Omnes" font-size="15" font-weight="normal" fill="#000000">
<tspan x="0" y="178">0%</tspan>
</text>
</g>
<g id="needle" transform="translate(175.000000, 19.000000)">
<polygon id="Triangle" fill="#3C3C3B" points="10 0 15 162 5 162"></polygon>
</g>
</g>
</g>
</g>
</svg>
<input type="range" id="percent" value="50" min="0" max="100">
You'll even win in browser compat ;-)
And note that this could be all simplified to:
$('#percent').on('input', function() {
$('#Triangle')
.attr('transform', 'rotate(' + percentToDegrees($(this).val()) + ', 10, 162)')
})
function percentToDegrees(percent) {
var degrees = -90;
var inc = 1.8;
return degrees += (percent * inc);
}
input {
display: block;
margin: 50px auto;
}
#Page-1 text {
font-family: Omnes-Regular, Omnes;
font-size: 15px;
font-weight: normal;
fill: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg width="100%" height="177px" viewBox="0 0 385 177" version="1.1">
<g id="Page-1" stroke="none" fill="none" transform="translate(0, -4)">
<g id="guage">
<path d="M84.8041871,178.856781 L84.8041871,179.169281 L25,179.169281 L25,178.669281 C25,119.519295 57.1931907,67.8894771 105.011512,40.3501901 L135,92.2989954 C105.009619,109.483749 84.8041871,141.810321 84.8041871,178.856781 Z" id="red" fill="#BD3632"></path>
<path d="M235.050803,92.4864742 C205.21439,75.1028089 167.169843,73.7652453 135.133157,92.2884751 L134.862916,92.4447251 L105,40.6455806 L105.432385,40.3955806 C156.58355,10.8205878 217.307001,12.8896752 265,40.5376689 L235.050803,92.4864742 L235.050803,92.4864742 Z" id="yellow" fill="#EEAF30"></path>
<path d="M235,92.2989954 L264.988488,40.3501901 C312.806809,67.8894771 345,119.519295 345,178.669281 L345,179.169281 L285.195813,179.169281 L285.195813,178.856781 C285.195813,141.810321 264.990381,109.483749 235,92.2989954 L235,92.2989954 Z" id="green" fill="#008542"></path>
<text id="100%" line-spacing="15">
<tspan x="350" y="180">100%</tspan>
</text>
<text id="50%">
<tspan x="171" y="14">50%</tspan>
</text>
<text id="0%">
<tspan x="0" y="178">0%</tspan>
</text>
</g>
<g id="needle" transform="translate(175.000000, 19.000000)">
<polygon id="Triangle" fill="#3C3C3B" points="10 0 15 162 5 162"></polygon>
</g>
</g>
</svg>
<input type="range" id="percent" value="50" min="0" max="100">

Not able to spin the cog based on the centre origin

I am trying to make a hover effect which will spin the three different cog svg icon to its respected centre origin. I tried using transform-origin as centre but no luck. Any help would be appreciated. Here is my code below.
.cog--middle {
transform: rotate(0deg);
transition: 0.3s;
transform-origin: center center;
}
svg:hover .cog--middle {
transform: rotate(360deg);
}
<svg
width="110px"
height="100px"
viewBox="0 0 110 100"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>ic--rollout</title>
<g class="cog--middle">
<path
d="M33.6286316,13.9605932 C35.3737066,12.3664297 37.3249373,10.9942262 39.4376676,9.88864575 L37.7639337,2.84180199 L45.4931775,0.0900928417 L49.0720315,6.94284116 C50.0880101,6.82901642 51.1207261,6.7705605 52.1670931,6.7705605 C53.4317563,6.7705605 54.6764785,6.85595112 55.8958106,7.02128212 L58.4472618,0.245430567 L66.3935871,2.28698531 L65.5015991,10.2150059 C67.2900149,11.208746 68.956009,12.3961862 70.4712471,13.7489885 L78.472844,10.4564722 L82.3993634,17.661307 L76.7195784,21.8770189 C76.7662084,21.9692338 76.8123344,22.061747 76.8579526,22.1545548 C77.8852682,24.244573 78.6551102,26.4840416 79.1260955,28.831571 L86.6029963,29.8342633 L86.4016167,38.0374048 L79.2833198,38.8585809 C78.9039047,41.1188654 78.2488189,43.2856361 77.3538253,45.3231245 L82.6154298,51.0936912 L77.189124,57.2481974 L71.7016575,53.6264993 C71.4947362,53.835398 71.2844889,54.0409954 71.0710016,54.2432054 C69.5139432,55.7180126 67.7845278,57.0126257 65.9161266,58.0936683 L67.0389416,65.7326031 L59.0993207,67.8000862 L56.455254,61.4407304 C56.091817,61.4976526 55.7260194,61.5474549 55.3580085,61.5899901 C54.3111517,61.7109872 53.2463841,61.7731797 52.1670931,61.7731797 C51.0760163,61.7731797 49.9997819,61.7096216 48.9418893,61.5860052 L46.5757103,67.5520122 L38.6662197,65.3720638 L39.5343402,58.7054384 C39.3461507,58.6079107 39.1592312,58.5082724 38.9736132,58.4065544 C36.8360572,57.2351814 34.8710875,55.7880122 33.126567,54.1129174 L26.517699,57.3888051 L22.0982404,50.4754646 L27.2985471,46.0207673 C26.2463138,43.7967471 25.4835451,41.4089702 25.0588838,38.9060872 L17.8061497,37.9334569 L18.0075293,29.7303153 L25.1942049,28.9012511 C25.6358466,26.6699551 26.347362,24.5357377 27.2933125,22.5340431 C27.3591986,22.3946237 27.426222,22.2558471 27.4943708,22.1177255 L21.6159342,17.247506 L26.1330259,10.3975792 L33.6286316,13.9605932 Z M52.1670931,53.9156627 C63.0143367,53.9156627 71.807765,45.1208371 71.807765,34.2718701 C71.807765,23.422903 63.0143367,14.6280775 52.1670931,14.6280775 C41.3198495,14.6280775 32.5264212,23.422903 32.5264212,34.2718701 C32.5264212,45.1208371 41.3198495,53.9156627 52.1670931,53.9156627 Z"
fill="#1B385C"
id="wheel"
/>
</g>
<g class="cog--left">
<path
d="M9.03425644,68.7605395 C10.0306523,67.8355529 11.144758,67.0393549 12.3510762,66.3978604 L11.3954144,62.3090478 L15.8086266,60.7124149 L17.8520661,64.6886069 C18.4321654,64.622562 19.0218215,64.5886439 19.6192718,64.5886439 C20.3413641,64.5886439 21.0520705,64.6381904 21.7482798,64.7341209 L23.205097,60.802547 L27.7422576,61.9871248 L27.2329539,66.5872254 C28.2540962,67.1638264 29.2053388,67.8528186 30.0705033,68.6377594 L34.6392226,66.7273322 L36.8811707,70.9078164 L33.6381501,73.3539124 C33.6647747,73.4074185 33.6911115,73.4610977 33.7171585,73.5149479 C34.3037309,74.7276458 34.7432922,76.0270599 35.0122134,77.3891743 L39.2813439,77.9709696 L39.166361,82.7307046 L35.101985,83.2071781 C34.8853478,84.5186703 34.5113096,85.7759026 34.0002898,86.9581209 L37.0045394,90.3063952 L33.9062494,93.877444 L30.773038,91.7760145 C30.6548909,91.8972245 30.5348448,92.016519 30.4129487,92.1338479 C29.5239058,92.98958 28.5364512,93.7407575 27.4696391,94.3680142 L28.1107394,98.8003777 L23.577407,100 L22.0677085,96.3100908 C21.8601947,96.3431189 21.6513331,96.3720158 21.4412077,96.3966962 C20.8434777,96.4669027 20.235521,96.5029888 19.6192718,96.5029888 C18.9962932,96.5029888 18.3817893,96.4661103 17.7777581,96.394384 L16.4267268,99.8560592 L11.910598,98.5911809 L12.4062739,94.7229835 C12.2988222,94.6663948 12.1920957,94.6085813 12.0861123,94.5495611 C10.8656193,93.8698917 9.74366881,93.0301961 8.74758958,92.0582505 L4.97408501,93.9590292 L2.45068049,89.9476796 L5.41993035,87.3629165 C4.8191306,86.0724661 4.38360801,84.6869987 4.14113665,83.2347429 L-1.53588253e-12,82.6703906 L0.114982882,77.9106556 L4.21840174,77.429605 C4.47056851,76.134933 4.87682672,74.8965892 5.41694166,73.7351396 C5.45456105,73.6542439 5.49282981,73.5737211 5.5317411,73.4935783 L2.17529527,70.6677154 L4.75444596,66.6931605 L9.034257,68.7605397 Z M19.6192718,91.9437967 C25.8127869,91.9437967 30.8336229,86.8407471 30.8336229,80.5458164 C30.8336229,74.2508857 25.8127869,69.147836 19.6192718,69.147836 C13.4257568,69.147836 8.40492079,74.2508857 8.40492079,80.5458164 C8.40492079,86.8407471 13.4257568,91.9437967 19.6192718,91.9437967 Z"
fill="#1B385C"
id="wheel-copy"
/>
</g>
<g class="cog--right">
<path
d="M79.7529126,63.3257569 C80.7493084,62.4007703 81.8634142,61.6045723 83.0697323,60.9630778 L82.1140705,56.8742652 L86.5272828,55.2776323 L88.5707222,59.2538243 C89.1508216,59.1877794 89.7404776,59.1538613 90.337928,59.1538613 C91.0600202,59.1538613 91.7707267,59.2034078 92.4669359,59.2993383 L93.9237532,55.3677644 L98.4609137,56.5523422 L97.95161,61.1524428 C98.9727524,61.7290438 99.9239949,62.418036 100.789159,63.2029768 L105.357879,61.2925496 L107.599827,65.4730338 L104.356806,67.9191298 C104.383431,67.9726359 104.409768,68.0263151 104.435815,68.0801653 C105.022387,69.2928632 105.461948,70.5922773 105.73087,71.9543917 L110,72.536187 L109.885017,77.295922 L105.820641,77.7723956 C105.604004,79.0838877 105.229966,80.3411199 104.718946,81.5233383 L107.723196,84.8716126 L104.624905,88.4426614 L101.491694,86.3412319 C101.373547,86.4624419 101.253501,86.5817363 101.131605,86.6990653 C100.242562,87.5547973 99.2551074,88.3059749 98.1882952,88.9332316 L98.8293956,93.3655951 L94.2960631,94.5652174 L92.7863646,90.8753082 C92.5788508,90.9083363 92.3699893,90.9372332 92.1598639,90.9619135 C91.5621338,91.0321201 90.9541772,91.0682062 90.337928,91.0682062 C89.7149494,91.0682062 89.1004454,91.0313277 88.4964142,90.9596014 L87.145383,94.4212766 L82.6292541,93.1563982 L83.12493,89.2882008 C83.0174784,89.2316122 82.9107518,89.1737987 82.8047684,89.1147785 C81.5842754,88.4351091 80.4623249,87.5954134 79.4662457,86.6234679 L75.6927412,88.5242466 L73.1693366,84.512897 L76.1385865,81.9281339 C75.5377867,80.6376835 75.1022641,79.2522161 74.8597928,77.7999603 L70.7186561,77.235608 L70.833639,72.475873 L74.9370579,71.9948224 C75.1892246,70.7001504 75.5954829,69.4618066 76.1355978,68.300357 C76.1732172,68.2194613 76.2114859,68.1389385 76.2503972,68.0587957 L72.8939514,65.2329328 L75.4731021,61.2583779 L79.7529131,63.3257571 Z M90.337928,86.5090141 C96.531443,86.5090141 101.552279,81.4059645 101.552279,75.1110338 C101.552279,68.816103 96.531443,63.7130534 90.337928,63.7130534 C84.1444129,63.7130534 79.1235769,68.816103 79.1235769,75.1110338 C79.1235769,81.4059645 84.1444129,86.5090141 90.337928,86.5090141 Z"
fill="#1B385C"
id="wheel-copy-2"
/>
</g>
</svg>

Gears can be drawn in a vector editor. But while it is difficult to find the exact center of rotation of the gear.
In case of inaccurate indication of the center of rotation, the gear will rotate with a bean,
I decided to first select the center of rotation - 100,100px and create a gear around it.
Draw the outer contour of the gear
When the radius of the circle R = 60px the circumference will be
C=2*Pi*R≈2*3.1415927*60 = 376.98
Find out the length of the sector in the presence of 24 gear teeth 376,98 / 24 = 15,71
Formula stroke-dasharray = "7.85 7.85"
<svg width="250" height="250" version="1.1"
viewBox="0 0 250 250" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink='http://www.w3.org/1999/xlink'>
<!-- big gear -->
<circle cx="100" cy="100" r="15" style="stroke: grey; fill:none; stroke-width: 4px;" />
<circle cx="100" cy="100" r="50" style="stroke: gray; fill:none; stroke-width: 15px;" />
<circle cx="100" cy="100" r="60" style="stroke: gray; fill:none; stroke-dasharray: 7.85 7.85; stroke-width: 10px;" />
</svg>
Create the spokes of the gear
Draw lines with markers at the ends
<svg width="250" height="250" version="1.1"
viewBox="0 0 250 250" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="14" height="10" rx="2" fill="grey"/>
</marker>
<!-- gear jumpers -->
<line id="line1" x1="150" y1="100" x2="60" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow);
marker-start: url(#MarkerArrow);
stroke:grey; stroke-width:6; ">
</line>
</defs
<!-- big gear -->
<circle cx="100" cy="100" r="15" style="stroke: grey; fill:none; stroke-width: 4px;" />
<circle cx="100" cy="100" r="50" style="stroke: gray; fill:none; stroke-width: 15px;" />
<circle cx="100" cy="100" r="60" style="stroke: gray; fill:none; stroke-dasharray: 7.85 7.85; stroke-width: 10px;" />
<use xlink:href="#line1" transform="rotate(0 100 100)"/>
</svg>
Clone jumpers and turn to different angles
<svg width="250" height="250" version="1.1"
viewBox="0 0 250 250" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="14" height="10" rx="2" fill="grey"/>
</marker>
<!-- gear jumpers -->
<line id="line1" x1="150" y1="100" x2="60" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow);
marker-start: url(#MarkerArrow);
stroke:grey; stroke-width:6; ">
</line>
</defs
<!-- big gear -->
<circle cx="100" cy="100" r="15" style="stroke: grey; fill:none; stroke-width: 4px;" />
<circle cx="100" cy="100" r="50" style="stroke: gray; fill:none; stroke-width: 15px;" />
<circle cx="100" cy="100" r="60" style="stroke: gray; fill:none; stroke-dasharray: 7.85 7.85; stroke-width: 10px;" />
<use xlink:href="#line1" transform="rotate(0 100 100)"/>
<use xlink:href="#line1" transform="rotate(120 100 100)"/>
<use xlink:href="#line1" transform="rotate(240 100 100)"/>
</svg>
Animate the rotation of the gear
<animateTransform
attributeName="transform"
type="rotate"
from="0 100 100" to="360 100 100"
dur="7s"
repeatCount="indefinite" fill="freeze"
/>
<svg width="250" height="250" version="1.1"
viewBox="0 0 250 250" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="14" height="10" rx="2" fill="grey"/>
</marker>
<!-- gear jumpers -->
<line id="line1" x1="150" y1="100" x2="60" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow);
marker-start: url(#MarkerArrow);
stroke:grey; stroke-width:6; ">
</line>
</defs
<!-- big gear -->
<g>
<animateTransform
attributeName="transform"
type="rotate"
from="0 100 100" to="360 100 100"
dur="7s"
repeatCount="indefinite" fill="freeze"
/>
<use xlink:href="#line1" transform="rotate(0 100 100)"/>
<use xlink:href="#line1" transform="rotate(120 100 100)"/>
<use xlink:href="#line1" transform="rotate(240 100 100)"/>
<circle cx="100" cy="100" r="15" style="stroke: grey; fill:none; stroke-width: 4px;" />
<circle cx="100" cy="100" r="50" style="stroke: gray; fill:none; stroke-width: 15px;" />
<circle cx="100" cy="100" r="60" style="stroke: gray; fill:none; stroke-dasharray: 7.85 7.85; stroke-width: 10px;" />
</g>
</svg>
Similarly, we create a small gear. Add rotation control buttons
A pair of gears ready
<svg width="250" height="250" version="1.1"
viewBox="0 0 250 250" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="14" height="10" rx="2" fill="grey"/>
</marker>
<!-- gear jumpers -->
<line id="line1" x1="150" y1="100" x2="60" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow);
marker-start: url(#MarkerArrow);
stroke:grey; stroke-width:6; ">
</line>
<marker id="MarkerArrow2" viewBox="0 0 20 20" refX="3" refY="3.5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="7" height="7" rx="2" fill="grey"/>
</marker>
<line id="line2" x1="168.5" y1="100" x2="211.5" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow2);
marker-start: url(#MarkerArrow2);
stroke:grey; stroke-width:3.5; ">
</line>
</defs>
<!-- big gear -->
<g id="Big_Gear">
<g>
<animateTransform attributeName="transform"
type="rotate"
from="0 100 100" to="360 100 100"
begin="gO1.click" end="stop1.click" dur="7s"
repeatCount="indefinite" fill="freeze"
/>
<use xlink:href="#line1" transform="rotate(0 100 100)"/>
<use xlink:href="#line1" transform="rotate(120 100 100)"/>
<use xlink:href="#line1" transform="rotate(240 100 100)"/>
<circle cx="100" cy="100" r="15" style="stroke: grey; fill:none; stroke-width: 4px;" />
<circle cx="100" cy="100" r="50" style="stroke: gray; fill:none; stroke-width: 15px;" />
<circle cx="100" cy="100" r="60" style="stroke: gray; fill:none; stroke-dasharray: 5 6; stroke-width: 10px;" />
</g>
</g>
<!-- small gear -->
<g id="Small_Gear" transform="rotate(20 100 100)">
<g>
<animateTransform attributeName="transform"
type="rotate"
from="0 190 100" to="-360 190 100"
begin="gO1.click" end="stop1.click" dur="7s"
repeatCount="indefinite" fill="freeze"
/>
<use xlink:href="#line2" transform="rotate(0 190 100)"/>
<use xlink:href="#line2" transform="rotate(120 190 100)"/>
<use xlink:href="#line2" transform="rotate(240 190 100)"/>
<circle cx="190" cy="100" r="7.5" style="stroke: grey; fill:none; stroke-width: 3px;" />
<circle cx="190" cy="100" r="25" style="stroke: grey; fill:none; stroke-width: 6px;" />
<circle cx="190" cy="100" r="30" style="stroke: grey; fill:none; stroke-dasharray: 5 5; stroke-width: 5px;" />
</g>
</g>
<g transform = "translate(-20,-160)">
<g id="gO1">
<rect x="35" y="165" height="20" width="60" rx="5" fill="green"/>
<text x="50" y="181" font-size="18" fill="white">GO</text>
</g>
<g id="stop1">
<rect x="100" y="165" height="20" width="60" rx="5" fill="red"/>
<text x="105" y="181" font-size="18" fill="white">STOP</text>
</g>
</g>
</svg>
Three gears
Gears can be cloned using the command -
<use xlink:href="#Small_Gear" />
<svg width="250" height="250" version="1.1"
viewBox="0 0 250 250" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="14" height="10" rx="2" fill="grey"/>
</marker>
<!-- gear jumpers -->
<line id="line1" x1="150" y1="100" x2="60" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow);
marker-start: url(#MarkerArrow);
stroke:grey; stroke-width:6; ">
</line>
<marker id="MarkerArrow2" viewBox="0 0 20 20" refX="3" refY="3.5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="7" height="7" rx="2" fill="grey"/>
</marker>
<line id="line2" x1="168.5" y1="100" x2="211.5" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow2);
marker-start: url(#MarkerArrow2);
stroke:grey; stroke-width:3.5; ">
</line>
</defs>
<g id="two gears" transform="translate(25 0)">
<!-- big gear -->
<g id="Big_Gear">
<g>
<animateTransform attributeName="transform"
type="rotate"
from="0 100 100" to="360 100 100"
begin="gO1.click" end="stop1.click" dur="7s"
repeatCount="indefinite" fill="freeze"
/>
<use xlink:href="#line1" transform="rotate(0 100 100)"/>
<use xlink:href="#line1" transform="rotate(120 100 100)"/>
<use xlink:href="#line1" transform="rotate(240 100 100)"/>
<circle cx="100" cy="100" r="15" style="stroke: grey; fill:none; stroke-width: 4px;" />
<circle cx="100" cy="100" r="50" style="stroke: gray; fill:none; stroke-width: 15px;" />
<circle cx="100" cy="100" r="60" style="stroke: gray; fill:none; stroke-dasharray: 5 6; stroke-width: 10px;" />
</g>
</g>
<!-- small gear -->
<g id="Small_Gear" transform="rotate(20 100 100)">
<g>
<animateTransform attributeName="transform"
type="rotate"
from="0 190 100" to="-360 190 100"
begin="gO1.click" end="stop1.click" dur="7s"
repeatCount="indefinite" fill="freeze"
/>
<use xlink:href="#line2" transform="rotate(0 190 100)"/>
<use xlink:href="#line2" transform="rotate(120 190 100)"/>
<use xlink:href="#line2" transform="rotate(240 190 100)"/>
<circle cx="190" cy="100" r="7.5" style="stroke: grey; fill:none; stroke-width: 3px;" />
<circle cx="190" cy="100" r="25" style="stroke: grey; fill:none; stroke-width: 6px;" />
<circle cx="190" cy="100" r="30" style="stroke: grey; fill:none; stroke-dasharray: 5 5; stroke-width: 5px;" />
</g>
</g>
</g>
<use xlink:href="#Small_Gear" x="-146" />
<g transform = "translate(-30,-160)">
<g id="gO1">
<rect x="35" y="165" height="20" width="60" rx="5" fill="green"/>
<text x="50" y="181" font-size="18" fill="white">GO</text>
</g>
<g id="stop1">
<rect x="100" y="165" height="20" width="60" rx="5" fill="red"/>
<text x="105" y="181" font-size="18" fill="white">STOP</text>
</g>
</g>
</svg>
Planetary transmission example
.parent{
position: relative;
}
.container{
width: 75%;
height: 75%;
margin: auto;
position: absolute;
top: 0;
left: 0;
}
<div class="parent">
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink='http://www.w3.org/1999/xlink'
viewBox="0 0 800 500" preserveAspectRatio="xMinYMin meet"> >
<title>animation planetary mechanism</title>
<defs>
<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="14" height="10" rx="2" fill="#22211D"/>
</marker>
<line id="line1" x1="150" y1="100" x2="60" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow);
marker-start: url(#MarkerArrow);
stroke:#22211D; stroke-width:6; ">
</line>
<marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="7" height="3.5" rx="2" fill="#22211D"/>
</marker>
<line id="line-s" x1="175" y1="100" x2="202" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow-s1);
marker-start: url(#MarkerArrow-s);
stroke:#22211D; stroke-width:2; " >
</line>
<linearGradient id="vertical"
x2="0%" y2="100%"
spreadMethod="pad" >
<stop offset="0%" stop-color="powderblue"/>
<stop offset="100%" stop-color="lightgreen"/>
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="url(#vertical)" />
<g transform = "translate(300,60)" >
<g id="wheel">
<g>
<animateTransform attributeName="transform"
type="rotate"
from="0 100 100" to="360 100 100"
begin="gO1.click" end="stop1.click" dur="14s"
repeatCount="indefinite"
/>
<use xlink:href="#line1" transform="rotate(0 100 100)"/>
<use xlink:href="#line1" transform="rotate(120 100 100)"/>
<use xlink:href="#line1" transform="rotate(240 100 100)"/>
<circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none; stroke-width: 4px;" />
<circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none; stroke-width: 15px;" />
<circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6; stroke-width: 10px;" />
<circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />
</g>
</g>
<g id="col-small">
<g>
<animateTransform attributeName="transform"
type="rotate"
from="0 188 100" to="-360 188 100"
begin="gO1.click" end="stop1.click" dur="3.5s"
repeatCount="indefinite"
/>
<use xlink:href="#line-s" transform="rotate(0 188 100)"/>
<use xlink:href="#line-s" transform="rotate(120 188 100)"/>
<use xlink:href="#line-s" transform="rotate(240 188 100)"/>
<circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none; stroke-width: 4px;" />
<circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none; stroke-width: 7px;" />
<circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5; stroke-width: 10px;" />
<circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />
</g>
</g>
<g id="planetar" >
<g>
<animateTransform attributeName="transform"
type="rotate"
from="0 100 100" to="-360 100 100"
begin="gO1.click" end="stop1.click" dur="28s"
repeatCount="indefinite"
/>
<circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5; stroke-width: 10px;" />
<circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none; stroke-width: 12px;" />
<circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />
</g>
</g>
<g >
<use xlink:href="#col-small" transform="rotate(240 100 100)" />
<use xlink:href="#col-small" transform="rotate(120 100 100)" />
</g>
<g transform = "translate(0,120)">
<g id="gO1">
<rect x="45" y="115" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue"/>
<text x="62" y="132" font-size="16" fill="yellow">GO</text>
</g>
<g id="stop1">
<rect x="110" y="115" height="22" width="60" rx="5" fill="crimson" stroke="red"/>
<text x="120" y="132" font-size="16" fill="yellow" >STOP</text>
</g>
</g>
</g>
</svg>
</div>
</div>

Considering that you are trying to avoid using transform-box, one way to achieve the desired result is playing around with the transform-origin property using percentage values
.cog--middle {
transform: rotate(0deg);
transition: 0.3s;
transform-origin: 47% 34%;
}
svg:hover .cog--middle {
transform: rotate(360deg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<svg width="110px" height="100px" viewBox="0 0 110 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>ic--rollout</title>
<g class="cog--middle">
<path d="M33.6286316,13.9605932 C35.3737066,12.3664297 37.3249373,10.9942262 39.4376676,9.88864575 L37.7639337,2.84180199 L45.4931775,0.0900928417 L49.0720315,6.94284116 C50.0880101,6.82901642 51.1207261,6.7705605 52.1670931,6.7705605 C53.4317563,6.7705605 54.6764785,6.85595112 55.8958106,7.02128212 L58.4472618,0.245430567 L66.3935871,2.28698531 L65.5015991,10.2150059 C67.2900149,11.208746 68.956009,12.3961862 70.4712471,13.7489885 L78.472844,10.4564722 L82.3993634,17.661307 L76.7195784,21.8770189 C76.7662084,21.9692338 76.8123344,22.061747 76.8579526,22.1545548 C77.8852682,24.244573 78.6551102,26.4840416 79.1260955,28.831571 L86.6029963,29.8342633 L86.4016167,38.0374048 L79.2833198,38.8585809 C78.9039047,41.1188654 78.2488189,43.2856361 77.3538253,45.3231245 L82.6154298,51.0936912 L77.189124,57.2481974 L71.7016575,53.6264993 C71.4947362,53.835398 71.2844889,54.0409954 71.0710016,54.2432054 C69.5139432,55.7180126 67.7845278,57.0126257 65.9161266,58.0936683 L67.0389416,65.7326031 L59.0993207,67.8000862 L56.455254,61.4407304 C56.091817,61.4976526 55.7260194,61.5474549 55.3580085,61.5899901 C54.3111517,61.7109872 53.2463841,61.7731797 52.1670931,61.7731797 C51.0760163,61.7731797 49.9997819,61.7096216 48.9418893,61.5860052 L46.5757103,67.5520122 L38.6662197,65.3720638 L39.5343402,58.7054384 C39.3461507,58.6079107 39.1592312,58.5082724 38.9736132,58.4065544 C36.8360572,57.2351814 34.8710875,55.7880122 33.126567,54.1129174 L26.517699,57.3888051 L22.0982404,50.4754646 L27.2985471,46.0207673 C26.2463138,43.7967471 25.4835451,41.4089702 25.0588838,38.9060872 L17.8061497,37.9334569 L18.0075293,29.7303153 L25.1942049,28.9012511 C25.6358466,26.6699551 26.347362,24.5357377 27.2933125,22.5340431 C27.3591986,22.3946237 27.426222,22.2558471 27.4943708,22.1177255 L21.6159342,17.247506 L26.1330259,10.3975792 L33.6286316,13.9605932 Z M52.1670931,53.9156627 C63.0143367,53.9156627 71.807765,45.1208371 71.807765,34.2718701 C71.807765,23.422903 63.0143367,14.6280775 52.1670931,14.6280775 C41.3198495,14.6280775 32.5264212,23.422903 32.5264212,34.2718701 C32.5264212,45.1208371 41.3198495,53.9156627 52.1670931,53.9156627 Z" fill="#1B385C" id="wheel"></path>
</g>
<g class="cog--left">
<path d="M9.03425644,68.7605395 C10.0306523,67.8355529 11.144758,67.0393549 12.3510762,66.3978604 L11.3954144,62.3090478 L15.8086266,60.7124149 L17.8520661,64.6886069 C18.4321654,64.622562 19.0218215,64.5886439 19.6192718,64.5886439 C20.3413641,64.5886439 21.0520705,64.6381904 21.7482798,64.7341209 L23.205097,60.802547 L27.7422576,61.9871248 L27.2329539,66.5872254 C28.2540962,67.1638264 29.2053388,67.8528186 30.0705033,68.6377594 L34.6392226,66.7273322 L36.8811707,70.9078164 L33.6381501,73.3539124 C33.6647747,73.4074185 33.6911115,73.4610977 33.7171585,73.5149479 C34.3037309,74.7276458 34.7432922,76.0270599 35.0122134,77.3891743 L39.2813439,77.9709696 L39.166361,82.7307046 L35.101985,83.2071781 C34.8853478,84.5186703 34.5113096,85.7759026 34.0002898,86.9581209 L37.0045394,90.3063952 L33.9062494,93.877444 L30.773038,91.7760145 C30.6548909,91.8972245 30.5348448,92.016519 30.4129487,92.1338479 C29.5239058,92.98958 28.5364512,93.7407575 27.4696391,94.3680142 L28.1107394,98.8003777 L23.577407,100 L22.0677085,96.3100908 C21.8601947,96.3431189 21.6513331,96.3720158 21.4412077,96.3966962 C20.8434777,96.4669027 20.235521,96.5029888 19.6192718,96.5029888 C18.9962932,96.5029888 18.3817893,96.4661103 17.7777581,96.394384 L16.4267268,99.8560592 L11.910598,98.5911809 L12.4062739,94.7229835 C12.2988222,94.6663948 12.1920957,94.6085813 12.0861123,94.5495611 C10.8656193,93.8698917 9.74366881,93.0301961 8.74758958,92.0582505 L4.97408501,93.9590292 L2.45068049,89.9476796 L5.41993035,87.3629165 C4.8191306,86.0724661 4.38360801,84.6869987 4.14113665,83.2347429 L-1.53588253e-12,82.6703906 L0.114982882,77.9106556 L4.21840174,77.429605 C4.47056851,76.134933 4.87682672,74.8965892 5.41694166,73.7351396 C5.45456105,73.6542439 5.49282981,73.5737211 5.5317411,73.4935783 L2.17529527,70.6677154 L4.75444596,66.6931605 L9.034257,68.7605397 Z M19.6192718,91.9437967 C25.8127869,91.9437967 30.8336229,86.8407471 30.8336229,80.5458164 C30.8336229,74.2508857 25.8127869,69.147836 19.6192718,69.147836 C13.4257568,69.147836 8.40492079,74.2508857 8.40492079,80.5458164 C8.40492079,86.8407471 13.4257568,91.9437967 19.6192718,91.9437967 Z" fill="#1B385C" id="wheel-copy"></path>
</g>
<g class="cog--right">
<path d="M79.7529126,63.3257569 C80.7493084,62.4007703 81.8634142,61.6045723 83.0697323,60.9630778 L82.1140705,56.8742652 L86.5272828,55.2776323 L88.5707222,59.2538243 C89.1508216,59.1877794 89.7404776,59.1538613 90.337928,59.1538613 C91.0600202,59.1538613 91.7707267,59.2034078 92.4669359,59.2993383 L93.9237532,55.3677644 L98.4609137,56.5523422 L97.95161,61.1524428 C98.9727524,61.7290438 99.9239949,62.418036 100.789159,63.2029768 L105.357879,61.2925496 L107.599827,65.4730338 L104.356806,67.9191298 C104.383431,67.9726359 104.409768,68.0263151 104.435815,68.0801653 C105.022387,69.2928632 105.461948,70.5922773 105.73087,71.9543917 L110,72.536187 L109.885017,77.295922 L105.820641,77.7723956 C105.604004,79.0838877 105.229966,80.3411199 104.718946,81.5233383 L107.723196,84.8716126 L104.624905,88.4426614 L101.491694,86.3412319 C101.373547,86.4624419 101.253501,86.5817363 101.131605,86.6990653 C100.242562,87.5547973 99.2551074,88.3059749 98.1882952,88.9332316 L98.8293956,93.3655951 L94.2960631,94.5652174 L92.7863646,90.8753082 C92.5788508,90.9083363 92.3699893,90.9372332 92.1598639,90.9619135 C91.5621338,91.0321201 90.9541772,91.0682062 90.337928,91.0682062 C89.7149494,91.0682062 89.1004454,91.0313277 88.4964142,90.9596014 L87.145383,94.4212766 L82.6292541,93.1563982 L83.12493,89.2882008 C83.0174784,89.2316122 82.9107518,89.1737987 82.8047684,89.1147785 C81.5842754,88.4351091 80.4623249,87.5954134 79.4662457,86.6234679 L75.6927412,88.5242466 L73.1693366,84.512897 L76.1385865,81.9281339 C75.5377867,80.6376835 75.1022641,79.2522161 74.8597928,77.7999603 L70.7186561,77.235608 L70.833639,72.475873 L74.9370579,71.9948224 C75.1892246,70.7001504 75.5954829,69.4618066 76.1355978,68.300357 C76.1732172,68.2194613 76.2114859,68.1389385 76.2503972,68.0587957 L72.8939514,65.2329328 L75.4731021,61.2583779 L79.7529131,63.3257571 Z M90.337928,86.5090141 C96.531443,86.5090141 101.552279,81.4059645 101.552279,75.1110338 C101.552279,68.816103 96.531443,63.7130534 90.337928,63.7130534 C84.1444129,63.7130534 79.1235769,68.816103 79.1235769,75.1110338 C79.1235769,81.4059645 84.1444129,86.5090141 90.337928,86.5090141 Z" fill="#1B385C" id="wheel-copy-2"></path>
</g>
</svg>
</body>
</html>

Basically, there are many ways you can solve this problem. I won't cover all of them, but here are some in order of effectiveness:
1) Just use separate SVG objects
If you going to animate different parts of pure SVG (no libraries like Snap.svg) with pure CSS - don't mix everything in one single SVG object. Instead, create 3 objects, each one with separate viewBox. That way you'll have total control over it with CSS animations
svg path {
transform: rotate(0deg);
transition: 3s;
transform-origin: center center;
}
svg:hover path {
transform: rotate(360deg);
}
.cog--middle {
position: absolute;
width: 68.8px;
height: 67.71px;
left: 17px;
top: 0px;
}
.cog--left {
position: absolute;
width: 40.03px;
height: 38.8px;
left: 0px;
top: 60px;
}
.cog--right {
position: absolute;
width: 40.03px;
height: 38.8px;
left: 70px;
top: 55px;
}
<svg class="cog--middle" 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 68.8 67.71" style="enable-background:new 0 0 68.8 67.71;" xml:space="preserve">
<path id="wheel1" fill="#1B395D" d="M15.82,13.87c1.75-1.59,3.7-2.97,5.81-4.07l-1.67-7.05L27.69,0l3.58,6.85c1.02-0.11,2.05-0.17,3.1-0.17c1.26,0,2.51,0.09,3.73,0.25l2.55-6.78l7.95,2.04l-0.89,7.93c1.79,0.99,3.45,2.18,4.97,3.53l8-3.29l3.93,7.2l-5.68,4.22c0.05,0.09,0.09,0.18,0.14,0.28c1.03,2.09,1.8,4.33,2.27,6.68l7.48,1l-0.2,8.2l-7.12,0.82c-0.38,2.26-1.03,4.43-1.93,6.46L64.81,51l-5.43,6.15l-5.49-3.62c-0.21,0.21-0.42,0.41-0.63,0.62c-1.56,1.47-3.29,2.77-5.15,3.85l1.12,7.64l-7.94,2.07l-2.64-6.36c-0.36,0.06-0.73,0.11-1.1,0.15c-1.05,0.12-2.11,0.18-3.19,0.18c-1.09,0-2.17-0.06-3.23-0.19l-2.37,5.97l-7.91-2.18l0.87-6.67c-0.19-0.1-0.38-0.2-0.56-0.3c-2.14-1.17-4.1-2.62-5.85-4.29L8.71,57.3l-4.42-6.91l5.2-4.45c-1.05-2.22-1.82-4.61-2.24-7.11L0,37.84l0.2-8.2l7.19-0.83c0.44-2.23,1.15-4.37,2.1-6.37c0.07-0.14,0.13-0.28,0.2-0.42l-5.88-4.87l4.52-6.85L15.82,13.87z M34.36,53.83C45.21,53.83,54,45.03,54,34.18s-8.79-19.64-19.64-19.64s-19.64,8.79-19.64,19.64S23.51,53.83,34.36,53.83z"/>
</svg>
<svg class="cog--left" 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 40.03 38.8" style="enable-background:new 0 0 40.03 38.8;" xml:space="preserve">
<path id="wheel2" fill="#1B395D" d="M34.48,12.91c0.57,1.23,0.98,2.54,1.21,3.89l4.18,0.36l0.15,4.69l-4.41,0.71c-0.12,0.57-0.27,1.14-0.45,1.71c-0.22,0.69-0.49,1.35-0.8,1.98l3.28,2.61L35.1,32.8l-4.21-1.91c-0.87,0.79-1.82,1.48-2.83,2.06l0.4,4.94l-4.67,0.83l-1.32-3.84c-0.06,0.01-0.12,0.02-0.18,0.03c-1.33,0.18-2.71,0.19-4.08,0.03l-1.88,3.88l-4.49-1.59l0.81-4.01c-1.18-0.61-2.26-1.36-3.22-2.21L5.31,32.8l-2.43-4.05l2.97-2.32c-0.08-0.15-0.15-0.3-0.23-0.45c-0.54-1.11-0.94-2.28-1.21-3.49L0,21.7l0.27-4.68l3.98-0.29c0.03-0.21,0.07-0.41,0.11-0.62c0.12-0.59,0.27-1.18,0.47-1.76c0.19-0.59,0.42-1.16,0.68-1.72l-2.87-2.36l2.61-3.9l3.52,1.67c0.09-0.08,0.18-0.17,0.26-0.25c1.03-0.95,2.17-1.75,3.41-2.4l-0.63-4.18l4.6-1.15l1.53,3.63c1.41-0.17,2.87-0.15,4.32,0.07L24.07,0l4.49,1.59l-0.82,4.05c1.15,0.64,2.2,1.41,3.14,2.29c0.07,0.06,0.13,0.12,0.19,0.18L34.8,5.8l2.98,3.69L34.48,12.91z M9.16,15.76c-1.93,5.89,1.36,12.25,7.35,14.2c5.98,1.96,12.39-1.23,14.32-7.12c1.93-5.89-1.36-12.25-7.35-14.2C17.49,6.69,11.08,9.88,9.16,15.76z"/>
</svg>
<svg class="cog--right" 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 40.03 38.8" style="enable-background:new 0 0 40.03 38.8;" xml:space="preserve">
<path id="wheel2" fill="#1B395D" d="M34.48,12.91c0.57,1.23,0.98,2.54,1.21,3.89l4.18,0.36l0.15,4.69l-4.41,0.71c-0.12,0.57-0.27,1.14-0.45,1.71c-0.22,0.69-0.49,1.35-0.8,1.98l3.28,2.61L35.1,32.8l-4.21-1.91c-0.87,0.79-1.82,1.48-2.83,2.06l0.4,4.94l-4.67,0.83l-1.32-3.84c-0.06,0.01-0.12,0.02-0.18,0.03c-1.33,0.18-2.71,0.19-4.08,0.03l-1.88,3.88l-4.49-1.59l0.81-4.01c-1.18-0.61-2.26-1.36-3.22-2.21L5.31,32.8l-2.43-4.05l2.97-2.32c-0.08-0.15-0.15-0.3-0.23-0.45c-0.54-1.11-0.94-2.28-1.21-3.49L0,21.7l0.27-4.68l3.98-0.29c0.03-0.21,0.07-0.41,0.11-0.62c0.12-0.59,0.27-1.18,0.47-1.76c0.19-0.59,0.42-1.16,0.68-1.72l-2.87-2.36l2.61-3.9l3.52,1.67c0.09-0.08,0.18-0.17,0.26-0.25c1.03-0.95,2.17-1.75,3.41-2.4l-0.63-4.18l4.6-1.15l1.53,3.63c1.41-0.17,2.87-0.15,4.32,0.07L24.07,0l4.49,1.59l-0.82,4.05c1.15,0.64,2.2,1.41,3.14,2.29c0.07,0.06,0.13,0.12,0.19,0.18L34.8,5.8l2.98,3.69L34.48,12.91z M9.16,15.76c-1.93,5.89,1.36,12.25,7.35,14.2c5.98,1.96,12.39-1.23,14.32-7.12c1.93-5.89-1.36-12.25-7.35-14.2C17.49,6.69,11.08,9.88,9.16,15.76z"/>
</svg>
2) DO use transform-box
In most cases that will do the trick. If you need wider browser support - just use separate CSS class for special browsers, like Edge, with pixel-perfect transform-origin property and toggle between classes with JS.
.modern{
transform-origin: 50% 50%;
transform-box: fill-box;
}
.edge{
transform-origin: 52px 34px;
}
3) DO use Snap.svg
This library will let you animate anything with ease. You just sit back and relax.
var s = Snap("#svg"),
gear = s.select('#wheel'),
bbox = gear.getBBox();
gear.transform("rotate(0 "+bbox.cx+" "+bbox.cy+")");
gear.animate({ transform: "rotate(3600 "+bbox.cx+" "+bbox.cy+")"}, 50000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>
<svg id="svg"
width="110px"
height="100px"
viewBox="0 0 110 100"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>ic--rollout</title>
<g class="cog--middle">
<path
d="M33.6286316,13.9605932 C35.3737066,12.3664297 37.3249373,10.9942262 39.4376676,9.88864575 L37.7639337,2.84180199 L45.4931775,0.0900928417 L49.0720315,6.94284116 C50.0880101,6.82901642 51.1207261,6.7705605 52.1670931,6.7705605 C53.4317563,6.7705605 54.6764785,6.85595112 55.8958106,7.02128212 L58.4472618,0.245430567 L66.3935871,2.28698531 L65.5015991,10.2150059 C67.2900149,11.208746 68.956009,12.3961862 70.4712471,13.7489885 L78.472844,10.4564722 L82.3993634,17.661307 L76.7195784,21.8770189 C76.7662084,21.9692338 76.8123344,22.061747 76.8579526,22.1545548 C77.8852682,24.244573 78.6551102,26.4840416 79.1260955,28.831571 L86.6029963,29.8342633 L86.4016167,38.0374048 L79.2833198,38.8585809 C78.9039047,41.1188654 78.2488189,43.2856361 77.3538253,45.3231245 L82.6154298,51.0936912 L77.189124,57.2481974 L71.7016575,53.6264993 C71.4947362,53.835398 71.2844889,54.0409954 71.0710016,54.2432054 C69.5139432,55.7180126 67.7845278,57.0126257 65.9161266,58.0936683 L67.0389416,65.7326031 L59.0993207,67.8000862 L56.455254,61.4407304 C56.091817,61.4976526 55.7260194,61.5474549 55.3580085,61.5899901 C54.3111517,61.7109872 53.2463841,61.7731797 52.1670931,61.7731797 C51.0760163,61.7731797 49.9997819,61.7096216 48.9418893,61.5860052 L46.5757103,67.5520122 L38.6662197,65.3720638 L39.5343402,58.7054384 C39.3461507,58.6079107 39.1592312,58.5082724 38.9736132,58.4065544 C36.8360572,57.2351814 34.8710875,55.7880122 33.126567,54.1129174 L26.517699,57.3888051 L22.0982404,50.4754646 L27.2985471,46.0207673 C26.2463138,43.7967471 25.4835451,41.4089702 25.0588838,38.9060872 L17.8061497,37.9334569 L18.0075293,29.7303153 L25.1942049,28.9012511 C25.6358466,26.6699551 26.347362,24.5357377 27.2933125,22.5340431 C27.3591986,22.3946237 27.426222,22.2558471 27.4943708,22.1177255 L21.6159342,17.247506 L26.1330259,10.3975792 L33.6286316,13.9605932 Z M52.1670931,53.9156627 C63.0143367,53.9156627 71.807765,45.1208371 71.807765,34.2718701 C71.807765,23.422903 63.0143367,14.6280775 52.1670931,14.6280775 C41.3198495,14.6280775 32.5264212,23.422903 32.5264212,34.2718701 C32.5264212,45.1208371 41.3198495,53.9156627 52.1670931,53.9156627 Z"
fill="#1B385C"
id="wheel"
/>
</g>
<g class="cog--left">
<path
d="M9.03425644,68.7605395 C10.0306523,67.8355529 11.144758,67.0393549 12.3510762,66.3978604 L11.3954144,62.3090478 L15.8086266,60.7124149 L17.8520661,64.6886069 C18.4321654,64.622562 19.0218215,64.5886439 19.6192718,64.5886439 C20.3413641,64.5886439 21.0520705,64.6381904 21.7482798,64.7341209 L23.205097,60.802547 L27.7422576,61.9871248 L27.2329539,66.5872254 C28.2540962,67.1638264 29.2053388,67.8528186 30.0705033,68.6377594 L34.6392226,66.7273322 L36.8811707,70.9078164 L33.6381501,73.3539124 C33.6647747,73.4074185 33.6911115,73.4610977 33.7171585,73.5149479 C34.3037309,74.7276458 34.7432922,76.0270599 35.0122134,77.3891743 L39.2813439,77.9709696 L39.166361,82.7307046 L35.101985,83.2071781 C34.8853478,84.5186703 34.5113096,85.7759026 34.0002898,86.9581209 L37.0045394,90.3063952 L33.9062494,93.877444 L30.773038,91.7760145 C30.6548909,91.8972245 30.5348448,92.016519 30.4129487,92.1338479 C29.5239058,92.98958 28.5364512,93.7407575 27.4696391,94.3680142 L28.1107394,98.8003777 L23.577407,100 L22.0677085,96.3100908 C21.8601947,96.3431189 21.6513331,96.3720158 21.4412077,96.3966962 C20.8434777,96.4669027 20.235521,96.5029888 19.6192718,96.5029888 C18.9962932,96.5029888 18.3817893,96.4661103 17.7777581,96.394384 L16.4267268,99.8560592 L11.910598,98.5911809 L12.4062739,94.7229835 C12.2988222,94.6663948 12.1920957,94.6085813 12.0861123,94.5495611 C10.8656193,93.8698917 9.74366881,93.0301961 8.74758958,92.0582505 L4.97408501,93.9590292 L2.45068049,89.9476796 L5.41993035,87.3629165 C4.8191306,86.0724661 4.38360801,84.6869987 4.14113665,83.2347429 L-1.53588253e-12,82.6703906 L0.114982882,77.9106556 L4.21840174,77.429605 C4.47056851,76.134933 4.87682672,74.8965892 5.41694166,73.7351396 C5.45456105,73.6542439 5.49282981,73.5737211 5.5317411,73.4935783 L2.17529527,70.6677154 L4.75444596,66.6931605 L9.034257,68.7605397 Z M19.6192718,91.9437967 C25.8127869,91.9437967 30.8336229,86.8407471 30.8336229,80.5458164 C30.8336229,74.2508857 25.8127869,69.147836 19.6192718,69.147836 C13.4257568,69.147836 8.40492079,74.2508857 8.40492079,80.5458164 C8.40492079,86.8407471 13.4257568,91.9437967 19.6192718,91.9437967 Z"
fill="#1B385C"
id="wheel-copy"
/>
</g>
<g class="cog--right">
<path
d="M79.7529126,63.3257569 C80.7493084,62.4007703 81.8634142,61.6045723 83.0697323,60.9630778 L82.1140705,56.8742652 L86.5272828,55.2776323 L88.5707222,59.2538243 C89.1508216,59.1877794 89.7404776,59.1538613 90.337928,59.1538613 C91.0600202,59.1538613 91.7707267,59.2034078 92.4669359,59.2993383 L93.9237532,55.3677644 L98.4609137,56.5523422 L97.95161,61.1524428 C98.9727524,61.7290438 99.9239949,62.418036 100.789159,63.2029768 L105.357879,61.2925496 L107.599827,65.4730338 L104.356806,67.9191298 C104.383431,67.9726359 104.409768,68.0263151 104.435815,68.0801653 C105.022387,69.2928632 105.461948,70.5922773 105.73087,71.9543917 L110,72.536187 L109.885017,77.295922 L105.820641,77.7723956 C105.604004,79.0838877 105.229966,80.3411199 104.718946,81.5233383 L107.723196,84.8716126 L104.624905,88.4426614 L101.491694,86.3412319 C101.373547,86.4624419 101.253501,86.5817363 101.131605,86.6990653 C100.242562,87.5547973 99.2551074,88.3059749 98.1882952,88.9332316 L98.8293956,93.3655951 L94.2960631,94.5652174 L92.7863646,90.8753082 C92.5788508,90.9083363 92.3699893,90.9372332 92.1598639,90.9619135 C91.5621338,91.0321201 90.9541772,91.0682062 90.337928,91.0682062 C89.7149494,91.0682062 89.1004454,91.0313277 88.4964142,90.9596014 L87.145383,94.4212766 L82.6292541,93.1563982 L83.12493,89.2882008 C83.0174784,89.2316122 82.9107518,89.1737987 82.8047684,89.1147785 C81.5842754,88.4351091 80.4623249,87.5954134 79.4662457,86.6234679 L75.6927412,88.5242466 L73.1693366,84.512897 L76.1385865,81.9281339 C75.5377867,80.6376835 75.1022641,79.2522161 74.8597928,77.7999603 L70.7186561,77.235608 L70.833639,72.475873 L74.9370579,71.9948224 C75.1892246,70.7001504 75.5954829,69.4618066 76.1355978,68.300357 C76.1732172,68.2194613 76.2114859,68.1389385 76.2503972,68.0587957 L72.8939514,65.2329328 L75.4731021,61.2583779 L79.7529131,63.3257571 Z M90.337928,86.5090141 C96.531443,86.5090141 101.552279,81.4059645 101.552279,75.1110338 C101.552279,68.816103 96.531443,63.7130534 90.337928,63.7130534 C84.1444129,63.7130534 79.1235769,68.816103 79.1235769,75.1110338 C79.1235769,81.4059645 84.1444129,86.5090141 90.337928,86.5090141 Z"
fill="#1B385C"
id="wheel-copy-2"
/>
</g>
</svg>
4) Make SVG animation
As #Alexandr_T suggested, use pure SVG animation without CSS. This is the same as previous solution, but instead of relaxing - you do the complicated calculations on your own.

How can I add a Hover Effect to an Image in an SVG Path?

I'm designing a radial menu using SVG paths:
Each "sector" should have an image that changes when the mouse cursor is inside that sector.
I have tested using :hover styles on pretty much everything in my .css file, but I can't figure out a way to make the image change together with the sector when it becomes highlighted.
<symbol class="icon icon-" id="icon-1" viewBox="0 0 83 83">
<!-- Red light -->
<image
xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Srouge.png/80px-Srouge.png"
width="83" height="83"
></image>
<!-- Green light for hover, can't get it to work -->
<!--
<image
xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Svert.png/80px-Svert.png"
width="83" height="83"
></image>
-->
</symbol>
Is there a way to switch to a different image when the SVG path gets highlighted without using JavaScript?
You can view the full code of my menu attempt here:
https://jsfiddle.net/tjdbkge5/
EDIT: Instead of replacing the image, fading it out with CSS filters would be fine, too. I just haven't managed to trigger these with the SVG path (they trigger only when the mouse is over the image itself).
Example:
symbol {
overflow: visible;
filter: grayscale(80%) brightness(25%);
opacity: 0.25;
}
symbol:hover {
filter: none;
opacity: 1;
}

All you need to do it put two symbols in each sector. One is initially visible, and the other is hidden. Then when you hover over the sector, hide the first one and show the second.
<a class="item" ...>
<path .. />
<use xlink:href="#icon-1" ... />
<use xlink:href="#icon-2" ... />
</a>
For hiding and showing, we use opacity:
.item use {
transition: opacity 0.1s linear;
}
.item use.hovered {
opacity: 0;
}
.item:hover use.unhovered {
opacity: 0;
}
.item:hover use.hovered {
opacity: 1;
}
Demo:
body {
background-color: #222222;
}
#menu {
display: block;
margin: 0 auto;
}
a {
cursor: pointer;
outline: none;
}
.item .sector {
transition: all .1s linear;
stroke: #111;
}
.item:hover .sector, .item:focus .sector {
fill: #eee;
}
.item use {
transition: opacity 0.1s linear;
}
.item use.hovered {
opacity: 0;
}
.item:hover use.unhovered {
opacity: 0;
}
.item:hover use.hovered {
opacity: 1;
}
#item-1 {
fill: #a364d9;
}
/* Next: #40a4d8 */
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Home Network Portal Page">
<title>Portal</title>
<!-- <link rel="stylesheet" type="text/css" href="menu.css"> -->
</head>
<body>
<svg
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="-252 -252 516 516"
style="display:block; position:absolute; top:5%; left:5%; width:90%; height:90%;"
id="menu"
>
<g id="symbolsContainer">
<symbol class="icon icon-" id="icon-1" viewBox="0 0 83 83">
<!-- Red light -->
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Srouge.png/80px-Srouge.png" height="83" width="83"></image>
<!--Replace the contents of this symbol with the content of your icon-->
<rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
<text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">1</text>
</symbol>
<symbol class="icon icon-" id="icon-2" viewBox="0 0 83 83">
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Svert.png/80px-Svert.png" height="83" width="83"></image>
<!--Replace the contents of this symbol with the content of your icon-->
<rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
<text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">2</text>
</symbol>
</g>
<g id="itemsContainer">
<a
class="item"
id="item-1"
role="link"
tabindex="0"
xlink:href=" "
xlink:title=" "
>
<path
class="sector"
d="
M 234.923155196477,-85.5050358314172
A 250,250 0 0,1 234.923155196477,85.5050358314172
L 117.461577598239,42.7525179157086
A 125,125 0 0,0 117.461577598239,-42.7525179157086
Z
"
></path>
<use
xlink:href="#icon-1"
width="83" height="83"
x="-41.5" y="-230.5"
transform="rotate(90 0 0)"
class="unhovered"
></use>
<use
xlink:href="#icon-2"
width="83" height="83"
x="-41.5" y="-230.5"
transform="rotate(90 0 0)"
class="hovered"
></use>
</a>
</g>
</svg>
</body>
</html>

I know you've said NO javascript.
Have you considered using SVG instead of images? If your images are all like the traffic light, you may use SVG and in this case it may be possible using only CSS.
I'm using javascript for this. There is a use element to reuse an image. The xlink:href attribute of the use element changes on mouseover and mouseout.
I've added an id to the path ("purple") but it can be done differently when you have all the images in place.
In CSS I've added use{pointer-events:none} I hope this is not interfering with your functionality.
const XLINK_NS="http://www.w3.org/1999/xlink"
purple.addEventListener("mouseover",()=>{
us.setAttributeNS(XLINK_NS,"xlink:href", "#green")
})
purple.addEventListener("mouseout",()=>{
us.setAttributeNS(XLINK_NS,"xlink:href", "#red")
})
body {
background-color: #222222;
}
#menu {
display: block;
margin: 0 auto;
}
a {
cursor: pointer;
outline: none;
}
.item .sector {
transition: all .1s linear;
stroke: #111;
}
.item:hover .sector, .item:focus .sector {
fill: #eee;
}
.menu-trigger {
fill: #EA2A55;
pointer-events: auto;
}
.menu-trigger:hover, .menu-trigger:focus {
cursor: pointer;
}
symbol {
overflow: visible;
}
#item-1 {
fill: #a364d9;
}
#item-2 {
fill: #ee6579;
}
#item-3 {
fill: #db3937;
}
#item-4 {
fill: #f66320;
}
#item-5 {
fill: #f8a227;
}
#item-6 {
fill: #fecc2f;
}
#item-7 {
fill: #b2c224;
}
#item-8 {
fill: #33beb7
}
/* Next: #40a4d8 */
use{pointer-events:none}
<svg
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="-252 -252 516 516"
style="display:block; position:absolute; top:5%; left:5%; width:90%; height:90%;"
id="menu"
>
<defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Srouge.png/80px-Srouge.png" height="83" width="83" id="red"></image>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Svert.png/80px-Svert.png" height="83" width="83" id="green"></image>
</defs>
<g id="symbolsContainer">
<symbol class="icon icon-" id="icon-1" viewBox="0 0 83 83">
<!-- Red light -->
<use xlink:href="#red" id="us" />
<!-- Green light for hover, can't get it to work -->
<!--
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Svert.png/80px-Svert.png" height="83" width="83"></image>
-->
<!--Replace the contents of this symbol with the content of your icon-->
<rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
<text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">1</text>
</symbol>
<symbol class="icon icon-" id="icon-2" viewBox="0 0 83 83">
<!--Replace the contents of this symbol with the content of your icon-->
<rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
<text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">2</text>
</symbol>
<symbol class="icon icon-" id="icon-3" viewBox="0 0 83 83">
<!--Replace the contents of this symbol with the content of your icon-->
<rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
<text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">3</text>
</symbol>
<symbol class="icon icon-" id="icon-4" viewBox="0 0 83 83">
<!--Replace the contents of this symbol with the content of your icon-->
<rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
<text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">4</text>
</symbol>
<symbol class="icon icon-" id="icon-5" viewBox="0 0 83 83">
<!--Replace the contents of this symbol with the content of your icon-->
<rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
<text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">5</text>
</symbol>
<symbol class="icon icon-" id="icon-6" viewBox="0 0 83 83">
<!--Replace the contents of this symbol with the content of your icon-->
<rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
<text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">6</text>
</symbol>
<symbol class="icon icon-" id="icon-7" viewBox="0 0 83 83">
<!--Replace the contents of this symbol with the content of your icon-->
<rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
<text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">7</text>
</symbol>
<symbol class="icon icon-" id="icon-8" viewBox="0 0 83 83">
<!--Replace the contents of this symbol with the content of your icon-->
<rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
<text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">8</text>
</symbol>
</g>
<g id="itemsContainer">
<a
class="item"
id="item-1"
role="link"
tabindex="0"
xlink:href=" "
xlink:title=" "
>
<path id="purple"
class="sector"
d="
M 234.923155196477,-85.5050358314172
A 250,250 0 0,1 234.923155196477,85.5050358314172
L 117.461577598239,42.7525179157086
A 125,125 0 0,0 117.461577598239,-42.7525179157086
Z
"
></path>
<use
xlink:href="#icon-1"
width="83" height="83"
x="-41.5" y="-230.5"
transform="rotate(90 0 0)"
></use>
</a>
<a
class="item"
id="item-2"
role="link"
tabindex="0"
xlink:href=" "
xlink:title=" "
>
<path
class="sector"
d="
M 105.654565435175,-226.576946759163
A 250,250 0 0,1 226.576946759163,-105.654565435175
L 113.288473379581,-52.8272827175874
A 125,125 0 0,0 52.8272827175875,-113.288473379581
Z
"
></path>
<use
xlink:href="#icon-2"
width="83" height="83"
x="-41.5" y="-230.5"
transform="rotate(45 0 0)"
></use>
</a>
<a
class="item"
id="item-3"
role="link"
tabindex="0"
xlink:href=" "
xlink:title=" "
>
<path
class="sector"
d="
M -85.5050358314171,-234.923155196477
A 250,250 0 0,1 85.5050358314172,-234.923155196477
L 42.7525179157086,-117.461577598239
A 125,125 0 0,0 -42.7525179157086,-117.461577598239
Z
"
></path>
<use
xlink:href="#icon-3"
width="83" height="83"
x="-41.5" y="-230.5"
transform="rotate(0 0 0)"
></use>
</a>
<a
class="item"
id="item-4"
role="link"
tabindex="0"
xlink:href=" "
xlink:title=" "
>
<path
class="sector"
d="
M -226.576946759163,-105.654565435175
A 250,250 0 0,1 -105.654565435175,-226.576946759163
L -52.8272827175874,-113.288473379581
A 125,125 0 0,0 -113.288473379581,-52.8272827175874
Z
"
></path>
<use
xlink:href="#icon-4"
width="83" height="83"
x="-41.5" y="-230.5"
transform="rotate(315 0 0)"
></use>
</a>
<a
class="item"
id="item-5"
role="link"
tabindex="0"
xlink:href=" "
xlink:title=" "
>
<path
class="sector"
d="
M -234.923155196477,85.5050358314172
A 250,250 0 0,1 -234.923155196477,-85.5050358314172
L -117.461577598239,-42.7525179157086
A 125,125 0 0,0 -117.461577598239,42.7525179157086
Z
"
></path>
<use
xlink:href="#icon-5"
width="83" height="83"
x="-41.5" y="-230.5"
transform="rotate(270 0 0)"
></use>
</a>
<a
class="item"
id="item-6"
role="link"
tabindex="0"
xlink:href=" "
xlink:title=" "
>
<path
class="sector"
d="
M -105.654565435175,226.576946759163
A 250,250 0 0,1 -226.576946759163,105.654565435175
L -113.288473379581,52.8272827175874
A 125,125 0 0,0 -52.8272827175874,113.288473379581
Z
"
></path>
<use
xlink:href="#icon-6"
width="83" height="83"
x="-41.5" y="-230.5"
transform="rotate(225 0 0)"
></use>
</a>
<a
class="item"
id="item-7"
role="link"
tabindex="0"
xlink:href=" "
xlink:title=" "
>
<path
class="sector"
d="
M 85.5050358314172,234.923155196477
A 250,250 0 0,1 -85.5050358314172,234.923155196477
L -42.7525179157086,117.461577598239
A 125,125 0 0,0 42.7525179157086,117.461577598239
Z
"
></path>
<use
xlink:href="#icon-7"
width="83" height="83"
x="-41.5" y="-230.5"
transform="rotate(180 0 0)"
></use>
</a>
<a
class="item"
id="item-8"
role="link"
tabindex="0"
xlink:href=" "
xlink:title=" "
>
<path
class="sector"
d="
M 226.576946759163,105.654565435175
A 250,250 0 0,1 105.654565435175,226.576946759163
L 52.8272827175874,113.288473379581
A 125,125 0 0,0 113.288473379581,52.8272827175874
Z
"
></path>
<use
xlink:href="#icon-8"
width="83" height="83"
x="-41.5" y="-230.5"
transform="rotate(135 0 0)"
></use>
</a>
</g>
</svg>
UPDATE
Here is an other example where I'm using SVG instead of images:
To your CSS I'm adding 2 lines:
use{pointer-events:none}
#purple:hover+use{fill:red}
Instead of the image I'm using an SVG symbol (Google's home icon) that I'm using with <use>and comes immediately after the #purple path.
body {
background-color: #222222;
}
#menu {
display: block;
margin: 0 auto;
}
a {
cursor: pointer;
outline: none;
}
.item .sector {
transition: all .1s linear;
stroke: #111;
}
.item:hover .sector, .item:focus .sector {
fill: #eee;
}
.menu-trigger {
fill: #EA2A55;
pointer-events: auto;
}
.menu-trigger:hover, .menu-trigger:focus {
cursor: pointer;
}
symbol {
overflow: visible;
}
#item-1 {
fill: #a364d9;
}
#item-2 {
fill: #ee6579;
}
#item-3 {
fill: #db3937;
}
#item-4 {
fill: #f66320;
}
#item-5 {
fill: #f8a227;
}
#item-6 {
fill: #fecc2f;
}
#item-7 {
fill: #b2c224;
}
#item-8 {
fill: #33beb7
}
/* Next: #40a4d8 */
use{pointer-events:none}
#purple:hover+use{fill:red}
<svg
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="-252 -252 516 516"
style="display:block; position:absolute; top:5%; left:5%; width:90%; height:90%;"
id="menu"
>
<defs>
<symbol id="home" viewBox='0 0 24 24'><title>home</title>
<path d='M10 20v-6h4v6h5v-8h3l-10-9-10 9h3v8z'></path>
<!--<path d='M0 0h24v24h-24z' fill='none'></path>-->
</symbol>
</defs>
<g id="symbolsContainer">
<symbol class="icon icon-" id="icon-1" viewBox="0 0 83 83">
<!-- Red light -->
<!-- Green light for hover, can't get it to work -->
<!--
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Svert.png/80px-Svert.png" height="83" width="83"></image>
-->
<!--Replace the contents of this symbol with the content of your icon-->
<rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
<text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">1</text>
</symbol>
<symbol class="icon icon-" id="icon-2" viewBox="0 0 83 83">
<!--Replace the contents of this symbol with the content of your icon-->
<rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
<text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">2</text>
</symbol>
<symbol class="icon icon-" id="icon-3" viewBox="0 0 83 83">
<!--Replace the contents of this symbol with the content of your icon-->
<rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
<text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">3</text>
</symbol>
<symbol class="icon icon-" id="icon-4" viewBox="0 0 83 83">
<!--Replace the contents of this symbol with the content of your icon-->
<rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
<text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">4</text>
</symbol>
<symbol class="icon icon-" id="icon-5" viewBox="0 0 83 83">
<!--Replace the contents of this symbol with the content of your icon-->
<rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
<text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">5</text>
</symbol>
<symbol class="icon icon-" id="icon-6" viewBox="0 0 83 83">
<!--Replace the contents of this symbol with the content of your icon-->
<rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
<text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">6</text>
</symbol>
<symbol class="icon icon-" id="icon-7" viewBox="0 0 83 83">
<!--Replace the contents of this symbol with the content of your icon-->
<rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
<text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">7</text>
</symbol>
<symbol class="icon icon-" id="icon-8" viewBox="0 0 83 83">
<!--Replace the contents of this symbol with the content of your icon-->
<rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
<text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">8</text>
</symbol>
</g>
<g id="itemsContainer">
<a
class="item"
id="item-1"
role="link"
tabindex="0"
xlink:href=" "
xlink:title=" "
>
<path id="purple"
class="sector"
d="
M 234.923155196477,-85.5050358314172
A 250,250 0 0,1 234.923155196477,85.5050358314172
L 117.461577598239,42.7525179157086
A 125,125 0 0,0 117.461577598239,-42.7525179157086
Z
"
></path>
<!--<use
xlink:href="#icon-1"
width="83" height="83"
x="-41.5" y="-230.5"
transform="rotate(90 0 0)"
></use>-->
<use id="test" xlink:href="#home" width="83" height="83" x="-41.5" y="-230.5" fill="gold" transform="rotate(90 0 0)" />
</a>
<a
class="item"
id="item-2"
role="link"
tabindex="0"
xlink:href=" "
xlink:title=" "
>
<path
class="sector"
d="
M 105.654565435175,-226.576946759163
A 250,250 0 0,1 226.576946759163,-105.654565435175
L 113.288473379581,-52.8272827175874
A 125,125 0 0,0 52.8272827175875,-113.288473379581
Z
"
></path>
<use
xlink:href="#icon-2"
width="83" height="83"
x="-41.5" y="-230.5"
transform="rotate(45 0 0)"
></use>
</a>
<a
class="item"
id="item-3"
role="link"
tabindex="0"
xlink:href=" "
xlink:title=" "
>
<path
class="sector"
d="
M -85.5050358314171,-234.923155196477
A 250,250 0 0,1 85.5050358314172,-234.923155196477
L 42.7525179157086,-117.461577598239
A 125,125 0 0,0 -42.7525179157086,-117.461577598239
Z
"
></path>
<use
xlink:href="#icon-3"
width="83" height="83"
x="-41.5" y="-230.5"
transform="rotate(0 0 0)"
></use>
</a>
<a
class="item"
id="item-4"
role="link"
tabindex="0"
xlink:href=" "
xlink:title=" "
>
<path
class="sector"
d="
M -226.576946759163,-105.654565435175
A 250,250 0 0,1 -105.654565435175,-226.576946759163
L -52.8272827175874,-113.288473379581
A 125,125 0 0,0 -113.288473379581,-52.8272827175874
Z
"
></path>
<use
xlink:href="#icon-4"
width="83" height="83"
x="-41.5" y="-230.5"
transform="rotate(315 0 0)"
></use>
</a>
<a
class="item"
id="item-5"
role="link"
tabindex="0"
xlink:href=" "
xlink:title=" "
>
<path
class="sector"
d="
M -234.923155196477,85.5050358314172
A 250,250 0 0,1 -234.923155196477,-85.5050358314172
L -117.461577598239,-42.7525179157086
A 125,125 0 0,0 -117.461577598239,42.7525179157086
Z
"
></path>
<use
xlink:href="#icon-5"
width="83" height="83"
x="-41.5" y="-230.5"
transform="rotate(270 0 0)"
></use>
</a>
<a
class="item"
id="item-6"
role="link"
tabindex="0"
xlink:href=" "
xlink:title=" "
>
<path
class="sector"
d="
M -105.654565435175,226.576946759163
A 250,250 0 0,1 -226.576946759163,105.654565435175
L -113.288473379581,52.8272827175874
A 125,125 0 0,0 -52.8272827175874,113.288473379581
Z
"
></path>
<use
xlink:href="#icon-6"
width="83" height="83"
x="-41.5" y="-230.5"
transform="rotate(225 0 0)"
></use>
</a>
<a
class="item"
id="item-7"
role="link"
tabindex="0"
xlink:href=" "
xlink:title=" "
>
<path
class="sector"
d="
M 85.5050358314172,234.923155196477
A 250,250 0 0,1 -85.5050358314172,234.923155196477
L -42.7525179157086,117.461577598239
A 125,125 0 0,0 42.7525179157086,117.461577598239
Z
"
></path>
<use
xlink:href="#icon-7"
width="83" height="83"
x="-41.5" y="-230.5"
transform="rotate(180 0 0)"
></use>
</a>
<a
class="item"
id="item-8"
role="link"
tabindex="0"
xlink:href=" "
xlink:title=" "
>
<path
class="sector"
d="
M 226.576946759163,105.654565435175
A 250,250 0 0,1 105.654565435175,226.576946759163
L 52.8272827175874,113.288473379581
A 125,125 0 0,0 113.288473379581,52.8272827175874
Z
"
></path>
<use
xlink:href="#icon-8"
width="83" height="83"
x="-41.5" y="-230.5"
transform="rotate(135 0 0)"
></use>
</a>
</g>
</svg>

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Reveal image on hovered SVG element - html

Related

Shifting SVG by fixed number of pixels

Facing problem while trying trying to rotate SVG animation

How can I rotate this SVG element correctly?

Not able to spin the cog based on the centre origin

How can I add a Hover Effect to an Image in an SVG Path?

Categories

Resources