I have an SVG demo image that consist multiple circles that are clipping an animated GIF.
Is it possible to watch hover events for each individual circle as the user mouses over them? For example the top-left circle or the middle-right circle.
Also is it possible to manipulate color overlay on those circles as they are hovered?
EDIT: Ideally I would like the hover to apply a color over the hovered circle and be clickable to take someone to another page.
EDIT 2: On hover as well as changing an overlay color I'd like for there to be text centered in the circle.
img {
clip-path: url(#myClip);
width: 100%;
}
<img src="https://media.giphy.com/media/3ornk23QkOZcd32kjm/giphy.gif" alt="">
<svg width="0" height="0">
<defs>
<clipPath id="myClip" clipPathUnits="objectBoundingBox" transform="scale(0.00991, 0.01)">
<path d="M 63.369194,12.267001 A 12.607063,12.267001 0 0 1 50.762131,24.534002 12.607063,12.267001 0 0 1 38.155067,12.267001 12.607063,12.267001 0 0 1 50.762131,0 12.607063,12.267001 0 0 1 63.369194,12.267001 Z" />
<path d="M 100.85033,12.267001 A 12.607063,12.267001 0 0 1 88.243263,24.534002 12.607063,12.267001 0 0 1 75.6362,12.267001 12.607063,12.267001 0 0 1 88.243263,0 12.607063,12.267001 0 0 1 100.85033,12.267001 Z" />
<path d="M 25.894252,12.267001 A 12.607063,12.267001 0 0 1 13.287189,24.534002 12.607063,12.267001 0 0 1 0.68012524,12.267001 12.607063,12.267001 0 0 1 13.287189,0 12.607063,12.267001 0 0 1 25.894252,12.267001 Z" />
<path d="M 63.369194,49.877972 A 12.607063,12.267001 0 0 1 50.762131,62.144973 12.607063,12.267001 0 0 1 38.155067,49.877972 12.607063,12.267001 0 0 1 50.762131,37.61097 12.607063,12.267001 0 0 1 63.369194,49.877972 Z" />
<path d="M 25.214127,49.877972 A 12.607063,12.267001 0 0 1 12.607063,62.144973 12.607063,12.267001 0 0 1 0,49.877972 12.607063,12.267001 0 0 1 12.607063,37.61097 12.607063,12.267001 0 0 1 25.214127,49.877972 Z" />
<path d="M 25.214127,87.216888 A 12.607063,12.267001 0 0 1 12.607063,99.48389 12.607063,12.267001 0 0 1 0,87.216888 12.607063,12.267001 0 0 1 12.607063,74.949887 12.607063,12.267001 0 0 1 25.214127,87.216888 Z" />
</clipPath>
</defs>
</svg>
The simplest solution is to move the GIF into the SVG so that you can reliably align the overlay circles with the clip path holes.
svg {
width: 100%;
}
.overlay path {
fill: red;
fill-opacity: 0;
}
.overlay path:hover {
fill-opacity: 0.5;
}
<svg viewBox="0 0 500 500">
<defs>
<clipPath id="myClip" clipPathUnits="objectBoundingBox" transform="scale(0.00991, 0.01)">
<path d="M 63.369194,12.267001 A 12.607063,12.267001 0 0 1 50.762131,24.534002 12.607063,12.267001 0 0 1 38.155067,12.267001 12.607063,12.267001 0 0 1 50.762131,0 12.607063,12.267001 0 0 1 63.369194,12.267001 Z" />
<path d="M 100.85033,12.267001 A 12.607063,12.267001 0 0 1 88.243263,24.534002 12.607063,12.267001 0 0 1 75.6362,12.267001 12.607063,12.267001 0 0 1 88.243263,0 12.607063,12.267001 0 0 1 100.85033,12.267001 Z" />
<path d="M 25.894252,12.267001 A 12.607063,12.267001 0 0 1 13.287189,24.534002 12.607063,12.267001 0 0 1 0.68012524,12.267001 12.607063,12.267001 0 0 1 13.287189,0 12.607063,12.267001 0 0 1 25.894252,12.267001 Z" />
<path d="M 63.369194,49.877972 A 12.607063,12.267001 0 0 1 50.762131,62.144973 12.607063,12.267001 0 0 1 38.155067,49.877972 12.607063,12.267001 0 0 1 50.762131,37.61097 12.607063,12.267001 0 0 1 63.369194,49.877972 Z" />
<path d="M 25.214127,49.877972 A 12.607063,12.267001 0 0 1 12.607063,62.144973 12.607063,12.267001 0 0 1 0,49.877972 12.607063,12.267001 0 0 1 12.607063,37.61097 12.607063,12.267001 0 0 1 25.214127,49.877972 Z" />
<path d="M 25.214127,87.216888 A 12.607063,12.267001 0 0 1 12.607063,99.48389 12.607063,12.267001 0 0 1 0,87.216888 12.607063,12.267001 0 0 1 12.607063,74.949887 12.607063,12.267001 0 0 1 25.214127,87.216888 Z" />
</clipPath>
</defs>
<image xlink:href="https://media.giphy.com/media/3ornk23QkOZcd32kjm/giphy.gif" width="500" height="500" clip-path="url(#myClip)"/>
<g class="overlay" transform="scale(4.955, 5)"><!-- 500 * the scale transform values in the clipPath -->
<a xlink:href="http://www.stackoverflow.com/">
<path d="M 63.369194,12.267001 A 12.607063,12.267001 0 0 1 50.762131,24.534002 12.607063,12.267001 0 0 1 38.155067,12.267001 12.607063,12.267001 0 0 1 50.762131,0 12.607063,12.267001 0 0 1 63.369194,12.267001 Z" />
</a>
<a xlink:href="http://www.stackoverflow.com/">
<path d="M 100.85033,12.267001 A 12.607063,12.267001 0 0 1 88.243263,24.534002 12.607063,12.267001 0 0 1 75.6362,12.267001 12.607063,12.267001 0 0 1 88.243263,0 12.607063,12.267001 0 0 1 100.85033,12.267001 Z" />
</a>
<a xlink:href="http://www.stackoverflow.com/">
<path d="M 25.894252,12.267001 A 12.607063,12.267001 0 0 1 13.287189,24.534002 12.607063,12.267001 0 0 1 0.68012524,12.267001 12.607063,12.267001 0 0 1 13.287189,0 12.607063,12.267001 0 0 1 25.894252,12.267001 Z" />
</a>
<a xlink:href="http://www.stackoverflow.com/">
<path d="M 63.369194,49.877972 A 12.607063,12.267001 0 0 1 50.762131,62.144973 12.607063,12.267001 0 0 1 38.155067,49.877972 12.607063,12.267001 0 0 1 50.762131,37.61097 12.607063,12.267001 0 0 1 63.369194,49.877972 Z" />
</a>
<a xlink:href="http://www.stackoverflow.com/">
<path d="M 25.214127,49.877972 A 12.607063,12.267001 0 0 1 12.607063,62.144973 12.607063,12.267001 0 0 1 0,49.877972 12.607063,12.267001 0 0 1 12.607063,37.61097 12.607063,12.267001 0 0 1 25.214127,49.877972 Z" />
</a>
<a xlink:href="http://www.stackoverflow.com/">
<path d="M 25.214127,87.216888 A 12.607063,12.267001 0 0 1 12.607063,99.48389 12.607063,12.267001 0 0 1 0,87.216888 12.607063,12.267001 0 0 1 12.607063,74.949887 12.607063,12.267001 0 0 1 25.214127,87.216888 Z" />
</a>
</g>
</svg>
I would recreate this with different element that you can manipulate separately.
I made 9 holes but you can easily reduce them like your example by removing background from the needed element.
img {
width: 100%;
display:bloc;
}
.container {
position:relative;
}
.container > div {
position:absolute;
z-index:0;
width:calc(100%/3);
height:calc(100%/3);
background:
radial-gradient(farthest-side,transparent 90%,#fff 92%),
linear-gradient(rgba(255,0,0,0.4),rgba(255,0,0,0.4)) center/0 0 no-repeat,
linear-gradient(rgba(0,255,0,0.4),rgba(0,255,0,0.4)) center/0 0 no-repeat;
}
.container > div:nth-child(2n):hover {
background-size: auto auto,0 0,auto auto;
}
.container > div:nth-child(2n+1):hover {
background-size: auto auto,auto auto,0 0;
}
.container > div:nth-child(1) {
top:0;
left:0;
}
.container > div:nth-child(2) {
top:0;
left:calc(100%/3);
}
.container > div:nth-child(3) {
top:0;
left:calc(2*100%/3);
}
.container > div:nth-child(4) {
top:calc(100%/3);
left:0;
}
.container > div:nth-child(5) {
top:calc(100%/3);
left:calc(100%/3);
}
.container > div:nth-child(6) {
top:calc(100%/3);
left:calc(2*100%/3);
}
.container > div:nth-child(7) {
top:calc(2*100%/3);
left:0;
}
.container > div:nth-child(8) {
top:calc(2*100%/3);
left:calc(100%/3);
}
.container > div:nth-child(9) {
top:calc(2*100%/3);
left:calc(2*100%/3);
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<img src="https://media.giphy.com/media/3ornk23QkOZcd32kjm/giphy.gif" alt="">
</div>
Well to make it clickable you need to put every path insive and <path id="wave1">... tag. Then you add an id to each path and in the css you just do a svg:hover #wave1 {code to change the element on hover}
Related
Given I have a svg as follows:
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#a)">
<path d="M0 0h20v20H0V0z" fill="#0D4AF9" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M2 14.666a1.334 1.334 0 1 1 2.669.001A1.334 1.334 0 0 1 2 14.666zm4.667.667a.668.668 0 0 1 0-1.334h10.667a.667.667 0 1 1 0 1.334H6.667zM2 9.998a1.333 1.333 0 1 1 2.666 0 1.333 1.333 0 0 1-2.666 0zm4.667.667a.667.667 0 1 1 0-1.333h10.667a.666.666 0 1 1 0 1.333H6.667zM2 5.333a1.333 1.333 0 1 1 2.666.001A1.333 1.333 0 0 1 2 5.332v.001zm4.667.666a.667.667 0 1 1 0-1.333h10.667a.666.666 0 1 1 0 1.333H6.667z"
fill="#fff"/>
</g>
<defs>
<clipPath id="a">
<rect width="20" height="20" rx="2"/>
</clipPath>
</defs>
</svg>
which renders like:
How can one make those white lines and circles transparent? I tried creating masks but a total noob.
You can join the d attributes of the 2 paths and use fill-rule="evenodd" so that the second part of the path became a hole.
body{background:silver}
<svg width="200" height="200" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#a)">
<path d="M0 0h20v20H0V0z
M2 14.666a1.334 1.334 0 1 1 2.669.001A1.334 1.334 0 0 1 2 14.666zm4.667.667a.668.668 0 0 1 0-1.334h10.667a.667.667 0 1 1 0 1.334H6.667zM2 9.998a1.333 1.333 0 1 1 2.666 0 1.333 1.333 0 0 1-2.666 0zm4.667.667a.667.667 0 1 1 0-1.333h10.667a.666.666 0 1 1 0 1.333H6.667zM2 5.333a1.333 1.333 0 1 1 2.666.001A1.333 1.333 0 0 1 2 5.332v.001zm4.667.666a.667.667 0 1 1 0-1.333h10.667a.666.666 0 1 1 0 1.333H6.667z"
fill="#0D4AF9" fill-rule="evenodd"
/>
</g>
<defs>
<clipPath id="a">
<rect width="20" height="20" rx="2"/>
</clipPath>
</defs>
</svg>
Observation: I've changed the size of the svg element. You can change it back to what you need.
Split out the element you want to another path, and then change the fill.
I want to use Bootstrap SVG Icon without bootstrap.
https://icons.getbootstrap.com/icons/arrow-clockwise/
See this code:
<span>
<span style="vertical-align:middle;display:inline-block;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
</svg>
</span>
<span style="vertical-align:middle;display:inline-block;">My Text 1</span>
</span>
<span>
<span style="vertical-align:middle;display:inline-block;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
</svg>
</span>
<span style="vertical-align:middle;display:inline-block;">My Text 2</span>
</span>
My question: how do I vertical align the text to the center of SVG icon next to it?
I'd use flexbox for this. Something like:
<span style="display: inline-flex; gap: 5px; align-items: center;">
<span style="display: flex; align-items: center; justify-content: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
</svg>
</span>
<span>My Text 2</span>
</span>
<span style="display: inline-flex; gap: 5px; align-items: center;">
<span style="display: flex; align-items: center; justify-content: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
</svg>
</span>
<span>My Text 2</span>
</span>
You'll have to match the height of the SVG with the text, and change the layout a bit. Try this:
<div style="display: flex; align-items: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 18 18" style="margin-right: 4px;">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
</svg>
<span>My Text 1</span>
</div>
Just included 1, you can produce the other similarly.
I've assumed you're using Bootstrap too so used some util classes from it & have wrapped the items in a hstack element to spread them out. Seems ok with smaller icons but to me looks slightly off as icons get larger.
<div class="hstack gap-4">
<div>
<span class="d-inline-block align-middle">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 18 18">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
</svg>
</span>
<span class="d-inline-block align-middle">My Text 1</span>
</div>
<div>
<span class="d-inline-block align-middle">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 18 18">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
</svg>
</span>
<span class="d-inline-block align-middle">My Text 2</span>
</div>
<div>
<span class="d-inline-block align-middle">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 18 18">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
</svg>
</span>
<span class="d-inline-block align-middle">My Text 3</span>
</div>
</div>
Here's a codepen: https://codepen.io/themelizeme/pen/eYEGBMq
I have an image that I'm exporting from the app Nucleo as an SVG. If you look at the SVG in the browser, it looks good, but after running it through svgtofont it turns into a black box. The current repo has many SVGs, all of them render fine, just this one is problematic.
Here's the code for the SVG, is there something in there that's incompatible with turning it into a font?
<svg width="16" height="16" viewBox="0 0 16 16" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>asset</title>
<g class="nc-icon-wrapper">
<defs>
<path d="M8 0c.558 0 1.01.452 1.01 1.009v1.069a5.97 5.97 0 0 1 4.909 4.913h1.072a1.009 1.009 0 1 1 0 2.018h-1.078a5.974 5.974 0 0 1-4.903 4.855v1.127a1.01 1.01 0 0 1-2.019 0v-1.132a5.975 5.975 0 0 1-4.853-4.85H1.01a1.009 1.009 0 1 1 0-2.018h1.122a5.974 5.974 0 0 1 4.859-4.909V1.009A1.01 1.01 0 0 1 8 0zm0 3.939a4.061 4.061 0 1 0 0 8.123 4.061 4.061 0 0 0 0-8.123zm0 2.07a1.992 1.992 0 1 1 .001 3.983 1.992 1.992 0 0 1 0-3.984z" id="path-1"/>
</defs>
<g id="Tracking" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="↳-🎨Color">
<mask id="mask-2" fill="#fff">
<use xlink:href="#path-1"/>
</mask>
<use id="Mask" fill="#000" xlink:href="#path-1"/>
<g id="Group" mask="url(#mask-2)" fill="#1B2431">
<g id="↳-🎨Color">
<path id="Base" d="M0 0h16v16H0z"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Try using this:
<svg width="16" height="16" viewBox="0 0 16 16" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>asset</title>
<path d="M8 0c.558 0 1.01.452 1.01 1.009v1.069a5.97 5.97 0 0 1 4.909 4.913h1.072a1.009 1.009 0 1 1 0 2.018h-1.078a5.974 5.974 0 0 1-4.903 4.855v1.127a1.01 1.01 0 0 1-2.019 0v-1.132a5.975 5.975 0 0 1-4.853-4.85H1.01a1.009 1.009 0 1 1 0-2.018h1.122a5.974 5.974 0 0 1 4.859-4.909V1.009A1.01 1.01 0 0 1 8 0zm0 3.939a4.061 4.061 0 1 0 0 8.123 4.061 4.061 0 0 0 0-8.123zm0 2.07a1.992 1.992 0 1 1 .001 3.983 1.992 1.992 0 0 1 0-3.984z" id="path-1"/>
</svg>
The path in your example with an ID of Baseuses this mask to cut itself out in a very contrived way. I just copied the mask path, and kept it as a path, and deleted everything else!
Demo:
https://codepen.io/EightArmsHQ/pen/bcde36ccc9e6b5b8a8e8e22cdaf58a2d
Every now and again I'm pleased I've messed around with SVG code!
I have been trying to change the bootstrap icon from outline to fill using stroke and fill.
For instance:
<svg width="22" height="22" viewBox="0 0 16 16" class="bi bi-house-door" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.646 1.146a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5H9.5a.5.5 0 0 1-.5-.5v-4H7v4a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6zM2.5 7.707V14H6v-4a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4h3.5V7.707L8 2.207l-5.5 5.5z"/>
<path fill-rule="evenodd" d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
</svg>
I have an outlined home icon:
How can I transfer it to this:
Dynamically using fill, stroke, and fill-rule. I have already tried changing the stroke and fill rule but I still cannot transform the first object to the second one. Is there any way I can do this?
The answer is no. There is no way to fill the inside of the house using CSS. At least not in a generic sense that would work with any shape *.
The reason is because the outline is the shape. The SVG contains two <path> elements.
the house outline.
the chimney
The house outline path consists of two subpaths. The first It contains two subpaths, one is the very outside border of the house shape and the second is the transparent hole in the middle.
If we split the first path into those two subpaths and colour them differently, you will see what is happening.
svg {
width: 300px;
height: 300px;
}
path:nth-child(1) {
fill: red;
}
path:nth-child(2) {
fill: yellow;
}
path:nth-child(3) {
fill: blue;
}
<svg width="22" height="22" viewBox="0 0 16 16" class="bi bi-house-door" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<!-- path 1 subpath 1 - the outline (red) -->
<path fill-rule="evenodd" d="M7.646 1.146a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5H9.5a.5.5 0 0 1-.5-.5v-4H7v4a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6z"/>
<!-- path 1 subpath 2 - the house inside (yellow) -->
<path fill-rule="evenodd" d="M2.5 7.707V14H6v-4a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4h3.5V7.707L8 2.207l-5.5 5.5z"/>
<!-- path 2 - the chimney (blue) -->
<path fill-rule="evenodd" d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
</svg>
If you want a filled version of the house, you would need to modify the SVG itself. Just remove the subpath for the "inside" of the house.
svg {
width: 300px;
height: 300px;
}
<svg width="22" height="22" viewBox="0 0 16 16" class="bi bi-house-door" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.646 1.146a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5H9.5a.5.5 0 0 1-.5-.5v-4H7v4a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6z"/>
<path fill-rule="evenodd" d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
</svg>
* Technically, you can achieve this with CSS. But the CSS would be specific to this particular icon, and not be generally applicable to other icons with the same issue.
Also, modifying paths this way is a new feature that is not supported by all browsers yet.
For instance, this example works in Chrome, but not Firefox.
svg {
width: 300px;
height: 300px;
}
path:nth-child(1) {
d: path('M7.646 1.146a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5H9.5a.5.5 0 0 1-.5-.5v-4H7v4a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6z');
}
<svg width="22" height="22" viewBox="0 0 16 16" class="bi bi-house-door" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.646 1.146a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5H9.5a.5.5 0 0 1-.5-.5v-4H7v4a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6zM2.5 7.707V14H6v-4a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4h3.5V7.707L8 2.207l-5.5 5.5z"/>
<path fill-rule="evenodd" d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
</svg>
I have a bar with a gradient that I'm trying to animate like it's filling from no color to several colors in different stops, going from the left side to the right side. The end result should freeze the gradient colors.
How do I do it with SMIL?
Can I achieve this with css animation?
here's the code and a non working fiddle example:
<svg xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 744.094 871.654">
<g
<defs>
<linearGradient id="myGrad" >
/* Are my offset correct? or should it rise from 0 to 100? */
<stop offset="25%" stop-color="yellow" />
<stop offset="25%" stopColor="green" />
<stop offset="25%" stopColor="blue" />
<stop offset="25%" stopColor="blue" />
<stop offset="25%" stopColor="red" />
<animate
attributeName="stop-color"
/* What should I animate here and how? */
dur="4s" />
</linearGradient>
</defs>
<path d="M740.096 599.704c-.027-8.88-7.245-16.055-16.123-16.028-8.88.03-16.055 7.248-16.028 16.127.014 4.4 1.8 8.377 4.668 11.272-8.59 28.308-21.002 55.294-37.011 80.391A328.59 328.59 0 0 1 635.908 742l-.266-.25a363.91 363.91 0 0 1-26.633 25.27 16.081 16.081 0 0 0-6.03-1.157c-8.877.027-16.054 7.246-16.025 16.125.002.803.08 1.583.198 2.35a347.143 347.143 0 0 1-6.908 4.942c-32.778 22.805-68.54 39.69-106.458 50.321a16.04 16.04 0 0 0-11.487-4.781c-7.366.022-13.545 5.004-15.425 11.768a382.23 382.23 0 0 1-64.675 5.518c-.74 0-1.483 0-2.226-.01a381.546 381.546 0 0 1-97.874-13.344c-1.671-7.411-8.299-12.947-16.216-12.925a16.533 16.533 0 0 0-10.72 3.992 387.615 387.615 0 0 1-55.212-25.694 387.43 387.43 0 0 1-70.985-51.554c.345-1.34.548-2.741.545-4.197-.031-9.154-7.475-16.551-16.63-16.527a16.874 16.874 0 0 0-3.306.344 347.345 347.345 0 0 1-35.2-46.19 346.111 346.111 0 0 1-37.443-79.483 16.52 16.52 0 0 0 4.7-11.606c-.03-9.154-7.473-16.554-16.629-16.527-9.157.028-16.556 7.476-16.527 16.63.024 7.932 5.62 14.537 13.065 16.146a362.193 362.193 0 0 0 39.28 83.476 363.588 363.588 0 0 0 36.575 48.045 16.476 16.476 0 0 0-1.042 5.794c.025 9.154 7.47 16.556 16.626 16.528a16.46 16.46 0 0 0 4.932-.76 403.53 403.53 0 0 0 74.128 53.867 403.134 403.134 0 0 0 57.52 26.77c1.203 8 8.095 14.133 16.424 14.109a16.53 16.53 0 0 0 11.606-4.8 397.583 397.583 0 0 0 14.54 3.959l.07-.279a397.86 397.86 0 0 0 87.68 10.298c.775.01 1.545.01 2.32.01a398.45 398.45 0 0 0 68.72-5.99 16.018 16.018 0 0 0 11.481 4.782c6.838-.024 12.648-4.317 14.953-10.342.514-.127 1.031-.243 1.545-.373l-.327-1.3c39.487-11.13 76.72-28.736 110.85-52.484a361.937 361.937 0 0 0 7.78-5.563 16.115 16.115 0 0 0 5.876 1.107c8.88-.032 16.055-7.25 16.026-16.13 0-.72-.068-1.424-.162-2.118 27.448-22.866 51.049-49.615 70.208-79.658a340.632 340.632 0 0 0 38.989-84.832c6.898-1.825 11.982-8.104 11.957-15.574"
fill="url(#myGrad)" />
</g>
</svg>
Updated fiddler thanks to the comment:
SEE HERE
Maybe you want something like this:
<svg xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 550 744.094 871.654">
<defs>
<linearGradient id="myGrad" >
<stop offset="0" stop-color="yellow">
<animate attributeName="offset" values="0" dur="2s" fill="freeze" />
</stop>
<stop offset="0" stop-color="green" >
<animate attributeName="offset" values="0;.2" dur="2s" fill="freeze" />
</stop>
<stop offset="0" stop-color="blue" >
<animate attributeName="offset" values="0;.5" dur="2s" fill="freeze" />
</stop>
<stop offset="0" stop-color="red" >
<animate attributeName="offset" values="0;1" dur="2s" fill="freeze" />
</stop>
<stop offset="1" stop-color="transparent" />
<animate />
</linearGradient>
</defs>
<path d="M740.096 599.704c-.027-8.88-7.245-16.055-16.123-16.028-8.88.03-16.055 7.248-16.028 16.127.014 4.4 1.8 8.377 4.668 11.272-8.59 28.308-21.002 55.294-37.011 80.391A328.59 328.59 0 0 1 635.908 742l-.266-.25a363.91 363.91 0 0 1-26.633 25.27 16.081 16.081 0 0 0-6.03-1.157c-8.877.027-16.054 7.246-16.025 16.125.002.803.08 1.583.198 2.35a347.143 347.143 0 0 1-6.908 4.942c-32.778 22.805-68.54 39.69-106.458 50.321a16.04 16.04 0 0 0-11.487-4.781c-7.366.022-13.545 5.004-15.425 11.768a382.23 382.23 0 0 1-64.675 5.518c-.74 0-1.483 0-2.226-.01a381.546 381.546 0 0 1-97.874-13.344c-1.671-7.411-8.299-12.947-16.216-12.925a16.533 16.533 0 0 0-10.72 3.992 387.615 387.615 0 0 1-55.212-25.694 387.43 387.43 0 0 1-70.985-51.554c.345-1.34.548-2.741.545-4.197-.031-9.154-7.475-16.551-16.63-16.527a16.874 16.874 0 0 0-3.306.344 347.345 347.345 0 0 1-35.2-46.19 346.111 346.111 0 0 1-37.443-79.483 16.52 16.52 0 0 0 4.7-11.606c-.03-9.154-7.473-16.554-16.629-16.527-9.157.028-16.556 7.476-16.527 16.63.024 7.932 5.62 14.537 13.065 16.146a362.193 362.193 0 0 0 39.28 83.476 363.588 363.588 0 0 0 36.575 48.045 16.476 16.476 0 0 0-1.042 5.794c.025 9.154 7.47 16.556 16.626 16.528a16.46 16.46 0 0 0 4.932-.76 403.53 403.53 0 0 0 74.128 53.867 403.134 403.134 0 0 0 57.52 26.77c1.203 8 8.095 14.133 16.424 14.109a16.53 16.53 0 0 0 11.606-4.8 397.583 397.583 0 0 0 14.54 3.959l.07-.279a397.86 397.86 0 0 0 87.68 10.298c.775.01 1.545.01 2.32.01a398.45 398.45 0 0 0 68.72-5.99 16.018 16.018 0 0 0 11.481 4.782c6.838-.024 12.648-4.317 14.953-10.342.514-.127 1.031-.243 1.545-.373l-.327-1.3c39.487-11.13 76.72-28.736 110.85-52.484a361.937 361.937 0 0 0 7.78-5.563 16.115 16.115 0 0 0 5.876 1.107c8.88-.032 16.055-7.25 16.026-16.13 0-.72-.068-1.424-.162-2.118 27.448-22.866 51.049-49.615 70.208-79.658a340.632 340.632 0 0 0 38.989-84.832c6.898-1.825 11.982-8.104 11.957-15.574"
fill="url(#myGrad)" />
</svg>
I'm not really sure what you want the animation to look like but here's one way to do it using SMIL...
Note that some of your stop colour properties are invalid as you've written them in camel case. I've corrected that below too.
<svg xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 550 744.094 871.654">
<g>
<defs>
<linearGradient id="myGrad" >
<stop offset="0%" stop-color="yellow"/>
<stop offset="0%" stop-color="green">
<animate
attributeName="offset"
to="25%"
dur="4s" fill="freeze"/>
</stop>
<stop offset="0%" stop-color="blue">
<animate
attributeName="offset"
to="50%"
dur="4s" fill="freeze"/>
</stop>
<stop offset="0%" stop-color="blue">
<animate
attributeName="offset"
to="75%"
dur="4s" fill="freeze"/>
</stop>
<stop offset="0%" stop-color="red">
<animate
attributeName="offset"
to="100%"
dur="4s" fill="freeze"/>
</stop>
</linearGradient>
</defs>
<path d="M740.096 599.704c-.027-8.88-7.245-16.055-16.123-16.028-8.88.03-16.055 7.248-16.028 16.127.014 4.4 1.8 8.377 4.668 11.272-8.59 28.308-21.002 55.294-37.011 80.391A328.59 328.59 0 0 1 635.908 742l-.266-.25a363.91 363.91 0 0 1-26.633 25.27 16.081 16.081 0 0 0-6.03-1.157c-8.877.027-16.054 7.246-16.025 16.125.002.803.08 1.583.198 2.35a347.143 347.143 0 0 1-6.908 4.942c-32.778 22.805-68.54 39.69-106.458 50.321a16.04 16.04 0 0 0-11.487-4.781c-7.366.022-13.545 5.004-15.425 11.768a382.23 382.23 0 0 1-64.675 5.518c-.74 0-1.483 0-2.226-.01a381.546 381.546 0 0 1-97.874-13.344c-1.671-7.411-8.299-12.947-16.216-12.925a16.533 16.533 0 0 0-10.72 3.992 387.615 387.615 0 0 1-55.212-25.694 387.43 387.43 0 0 1-70.985-51.554c.345-1.34.548-2.741.545-4.197-.031-9.154-7.475-16.551-16.63-16.527a16.874 16.874 0 0 0-3.306.344 347.345 347.345 0 0 1-35.2-46.19 346.111 346.111 0 0 1-37.443-79.483 16.52 16.52 0 0 0 4.7-11.606c-.03-9.154-7.473-16.554-16.629-16.527-9.157.028-16.556 7.476-16.527 16.63.024 7.932 5.62 14.537 13.065 16.146a362.193 362.193 0 0 0 39.28 83.476 363.588 363.588 0 0 0 36.575 48.045 16.476 16.476 0 0 0-1.042 5.794c.025 9.154 7.47 16.556 16.626 16.528a16.46 16.46 0 0 0 4.932-.76 403.53 403.53 0 0 0 74.128 53.867 403.134 403.134 0 0 0 57.52 26.77c1.203 8 8.095 14.133 16.424 14.109a16.53 16.53 0 0 0 11.606-4.8 397.583 397.583 0 0 0 14.54 3.959l.07-.279a397.86 397.86 0 0 0 87.68 10.298c.775.01 1.545.01 2.32.01a398.45 398.45 0 0 0 68.72-5.99 16.018 16.018 0 0 0 11.481 4.782c6.838-.024 12.648-4.317 14.953-10.342.514-.127 1.031-.243 1.545-.373l-.327-1.3c39.487-11.13 76.72-28.736 110.85-52.484a361.937 361.937 0 0 0 7.78-5.563 16.115 16.115 0 0 0 5.876 1.107c8.88-.032 16.055-7.25 16.026-16.13 0-.72-.068-1.424-.162-2.118 27.448-22.866 51.049-49.615 70.208-79.658a340.632 340.632 0 0 0 38.989-84.832c6.898-1.825 11.982-8.104 11.957-15.574"
fill="url(#myGrad)" />
</g>
</svg>
Looks like Chrome has a bug where it doesn't animate offsets that are percentages. Here's a workaround for that...
<svg xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 550 744.094 871.654">
<g>
<defs>
<linearGradient id="myGrad" >
<stop offset="0%" stop-color="yellow"/>
<stop offset="0" stop-color="green">
<animate
attributeName="offset"
to=".25"
dur="4s" fill="freeze"/>
</stop>
<stop offset="0" stop-color="blue">
<animate
attributeName="offset"
to=".5"
dur="4s" fill="freeze"/>
</stop>
<stop offset="0" stop-color="blue">
<animate
attributeName="offset"
to=".75"
dur="4s" fill="freeze"/>
</stop>
<stop offset="0" stop-color="red">
<animate
attributeName="offset"
to="1"
dur="4s" fill="freeze"/>
</stop>
</linearGradient>
</defs>
<path d="M740.096 599.704c-.027-8.88-7.245-16.055-16.123-16.028-8.88.03-16.055 7.248-16.028 16.127.014 4.4 1.8 8.377 4.668 11.272-8.59 28.308-21.002 55.294-37.011 80.391A328.59 328.59 0 0 1 635.908 742l-.266-.25a363.91 363.91 0 0 1-26.633 25.27 16.081 16.081 0 0 0-6.03-1.157c-8.877.027-16.054 7.246-16.025 16.125.002.803.08 1.583.198 2.35a347.143 347.143 0 0 1-6.908 4.942c-32.778 22.805-68.54 39.69-106.458 50.321a16.04 16.04 0 0 0-11.487-4.781c-7.366.022-13.545 5.004-15.425 11.768a382.23 382.23 0 0 1-64.675 5.518c-.74 0-1.483 0-2.226-.01a381.546 381.546 0 0 1-97.874-13.344c-1.671-7.411-8.299-12.947-16.216-12.925a16.533 16.533 0 0 0-10.72 3.992 387.615 387.615 0 0 1-55.212-25.694 387.43 387.43 0 0 1-70.985-51.554c.345-1.34.548-2.741.545-4.197-.031-9.154-7.475-16.551-16.63-16.527a16.874 16.874 0 0 0-3.306.344 347.345 347.345 0 0 1-35.2-46.19 346.111 346.111 0 0 1-37.443-79.483 16.52 16.52 0 0 0 4.7-11.606c-.03-9.154-7.473-16.554-16.629-16.527-9.157.028-16.556 7.476-16.527 16.63.024 7.932 5.62 14.537 13.065 16.146a362.193 362.193 0 0 0 39.28 83.476 363.588 363.588 0 0 0 36.575 48.045 16.476 16.476 0 0 0-1.042 5.794c.025 9.154 7.47 16.556 16.626 16.528a16.46 16.46 0 0 0 4.932-.76 403.53 403.53 0 0 0 74.128 53.867 403.134 403.134 0 0 0 57.52 26.77c1.203 8 8.095 14.133 16.424 14.109a16.53 16.53 0 0 0 11.606-4.8 397.583 397.583 0 0 0 14.54 3.959l.07-.279a397.86 397.86 0 0 0 87.68 10.298c.775.01 1.545.01 2.32.01a398.45 398.45 0 0 0 68.72-5.99 16.018 16.018 0 0 0 11.481 4.782c6.838-.024 12.648-4.317 14.953-10.342.514-.127 1.031-.243 1.545-.373l-.327-1.3c39.487-11.13 76.72-28.736 110.85-52.484a361.937 361.937 0 0 0 7.78-5.563 16.115 16.115 0 0 0 5.876 1.107c8.88-.032 16.055-7.25 16.026-16.13 0-.72-.068-1.424-.162-2.118 27.448-22.866 51.049-49.615 70.208-79.658a340.632 340.632 0 0 0 38.989-84.832c6.898-1.825 11.982-8.104 11.957-15.574"
fill="url(#myGrad)" />
</g>
</svg>