Nesting SVGs with center alignment - css
I need to place icon SVGs of random shape (i.e. not necessarily square-ish) on top of a pin/marker SVG.
I can easily stack them but I'm not sure how to align them so regardless of the shape, the icons are vertically and horizontally aligned.
Marker SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="45">
<defs>
<filter id="a" width="154.5%" height="509.1%" x="-27.3%" y="-204.5%" filterUnits="objectBoundingBox">
<feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(1 1)">
<ellipse cx="15" cy="37.467" fill="#999" fill-opacity=".9" filter="url(#a)" rx="11" ry="1.467"/>
<path fill="#006893" fill-rule="nonzero" stroke="#006893" d="M15 0C6.448 0 0 6.759 0 15.726c0 11.28 13.944 21.44 14.537 21.867.138.1.302.149.463.149a.784.784 0 0 0 .463-.15C16.055 37.167 30 27.007 30 15.727 30 6.76 23.552 0 15 0z"/>
</g>
</svg>
Icon SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>bicycle</title><path d="M5.5,6.137a1,1,0,0,0,0,2H6.909a.249.249,0,0,1,.231.156l.637,1.568a.251.251,0,0,1-.036.25l-.35.437a.25.25,0,0,1-.3.07A4.894,4.894,0,0,0,5,10.137a5,5,0,1,0,4.856,6.19.25.25,0,0,1,.243-.19h.4a1,1,0,0,0,.807-.409l4.281-5.837a.247.247,0,0,1,.236-.1.252.252,0,0,1,.2.161l.281.762a.251.251,0,0,1-.095.293,4.978,4.978,0,1,0,2.79-.87,3.824,3.824,0,0,0-.549.046.25.25,0,0,1-.27-.161L16.92,6.6a.249.249,0,0,1,.174-.329l1.742-.435a1,1,0,0,0-.485-1.941L15.8,4.532a1.5,1.5,0,0,0-1.042,1.974l.08.217a.253.253,0,0,1-.008.193.25.25,0,0,1-.142.129L9.764,8.8a.251.251,0,0,1-.316-.141l-.113-.279A.178.178,0,0,1,9.5,8.137a1,1,0,0,0,0-2Zm-.5,12a3,3,0,1,1,2.658-4.364.25.25,0,0,1-.222.364H5a1,1,0,0,0,0,2H7.436a.25.25,0,0,1,.222.364A2.985,2.985,0,0,1,5,18.137Zm5.049-4.076a.1.1,0,0,1-.174-.036,4.941,4.941,0,0,0-.927-1.916.249.249,0,0,1,0-.309l.609-.761a.252.252,0,0,1,.111-.08L12.5,9.95a.25.25,0,0,1,.286.383ZM19,18.137a3,3,0,0,1-3-3,2.959,2.959,0,0,1,.8-2.022.249.249,0,0,1,.417.084l.842,2.284a1,1,0,1,0,1.876-.692l-.964-2.617a.028.028,0,0,1,0-.025A.028.028,0,0,1,19,12.137a3,3,0,0,1,0,6Z"/></svg>
Stacked (Incorrect Alignment):
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="45">
<defs>
<filter id="a" width="154.5%" height="509.1%" x="-27.3%" y="-204.5%" filterUnits="objectBoundingBox">
<feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(1 1)">
<ellipse cx="15" cy="37.467" fill="#999" fill-opacity=".9" filter="url(#a)" rx="11" ry="1.467"/>
<path fill="#006893" fill-rule="nonzero" stroke="#006893" d="M15 0C6.448 0 0 6.759 0 15.726c0 11.28 13.944 21.44 14.537 21.867.138.1.302.149.463.149a.784.784 0 0 0 .463-.15C16.055 37.167 30 27.007 30 15.727 30 6.76 23.552 0 15 0z"/>
<g fill="#FFF" fill-rule="nonzero">
<path d="M5.5,6.137a1,1,0,0,0,0,2H6.909a.249.249,0,0,1,.231.156l.637,1.568a.251.251,0,0,1-.036.25l-.35.437a.25.25,0,0,1-.3.07A4.894,4.894,0,0,0,5,10.137a5,5,0,1,0,4.856,6.19.25.25,0,0,1,.243-.19h.4a1,1,0,0,0,.807-.409l4.281-5.837a.247.247,0,0,1,.236-.1.252.252,0,0,1,.2.161l.281.762a.251.251,0,0,1-.095.293,4.978,4.978,0,1,0,2.79-.87,3.824,3.824,0,0,0-.549.046.25.25,0,0,1-.27-.161L16.92,6.6a.249.249,0,0,1,.174-.329l1.742-.435a1,1,0,0,0-.485-1.941L15.8,4.532a1.5,1.5,0,0,0-1.042,1.974l.08.217a.253.253,0,0,1-.008.193.25.25,0,0,1-.142.129L9.764,8.8a.251.251,0,0,1-.316-.141l-.113-.279A.178.178,0,0,1,9.5,8.137a1,1,0,0,0,0-2Zm-.5,12a3,3,0,1,1,2.658-4.364.25.25,0,0,1-.222.364H5a1,1,0,0,0,0,2H7.436a.25.25,0,0,1,.222.364A2.985,2.985,0,0,1,5,18.137Zm5.049-4.076a.1.1,0,0,1-.174-.036,4.941,4.941,0,0,0-.927-1.916.249.249,0,0,1,0-.309l.609-.761a.252.252,0,0,1,.111-.08L12.5,9.95a.25.25,0,0,1,.286.383ZM19,18.137a3,3,0,0,1-3-3,2.959,2.959,0,0,1,.8-2.022.249.249,0,0,1,.417.084l.842,2.284a1,1,0,1,0,1.876-.692l-.964-2.617a.028.028,0,0,1,0-.025A.028.028,0,0,1,19,12.137a3,3,0,0,1,0,6Z"/>
</g>
</g>
</svg>
This is very simple.
Just embed your <svg> icon into the other SVG. Set the x, y, width, and height of the embedded <svg> element to the size and position of the square area you want the icon to be positioned within. And SVG will do the rest (including the centering).
In this case, I have chosen a square that is: x="6" y="6" width="20" height="20".
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="45">
<defs>
<filter id="a" width="154.5%" height="509.1%" x="-27.3%" y="-204.5%" filterUnits="objectBoundingBox">
<feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(1 1)">
<ellipse cx="15" cy="37.467" fill="#999" fill-opacity=".9" filter="url(#a)" rx="11" ry="1.467"/>
<path fill="#006893" fill-rule="nonzero" stroke="#006893" d="M15 0C6.448 0 0 6.759 0 15.726c0 11.28 13.944 21.44 14.537 21.867.138.1.302.149.463.149a.784.784 0 0 0 .463-.15C16.055 37.167 30 27.007 30 15.727 30 6.76 23.552 0 15 0z"/>
</g>
<svg x="6" y="6" width="20" height="20" viewBox="0 0 24 24" fill="#fff"><title>bicycle</title><path d="M5.5,6.137a1,1,0,0,0,0,2H6.909a.249.249,0,0,1,.231.156l.637,1.568a.251.251,0,0,1-.036.25l-.35.437a.25.25,0,0,1-.3.07A4.894,4.894,0,0,0,5,10.137a5,5,0,1,0,4.856,6.19.25.25,0,0,1,.243-.19h.4a1,1,0,0,0,.807-.409l4.281-5.837a.247.247,0,0,1,.236-.1.252.252,0,0,1,.2.161l.281.762a.251.251,0,0,1-.095.293,4.978,4.978,0,1,0,2.79-.87,3.824,3.824,0,0,0-.549.046.25.25,0,0,1-.27-.161L16.92,6.6a.249.249,0,0,1,.174-.329l1.742-.435a1,1,0,0,0-.485-1.941L15.8,4.532a1.5,1.5,0,0,0-1.042,1.974l.08.217a.253.253,0,0,1-.008.193.25.25,0,0,1-.142.129L9.764,8.8a.251.251,0,0,1-.316-.141l-.113-.279A.178.178,0,0,1,9.5,8.137a1,1,0,0,0,0-2Zm-.5,12a3,3,0,1,1,2.658-4.364.25.25,0,0,1-.222.364H5a1,1,0,0,0,0,2H7.436a.25.25,0,0,1,.222.364A2.985,2.985,0,0,1,5,18.137Zm5.049-4.076a.1.1,0,0,1-.174-.036,4.941,4.941,0,0,0-.927-1.916.249.249,0,0,1,0-.309l.609-.761a.252.252,0,0,1,.111-.08L12.5,9.95a.25.25,0,0,1,.286.383ZM19,18.137a3,3,0,0,1-3-3,2.959,2.959,0,0,1,.8-2.022.249.249,0,0,1,.417.084l.842,2.284a1,1,0,1,0,1.876-.692l-.964-2.617a.028.028,0,0,1,0-.025A.028.028,0,0,1,19,12.137a3,3,0,0,1,0,6Z"/></svg>
</svg>
Answer #Paul LeBeau is good for its originality, but unfortunately with this solution, the combined icon can only be used once.
Because different parts of the icons are located in different instances of svg
Suppose you need to use combined icons multiple times as map pointers.
Then you have to use another solution for positioning the components of the icon relative to each other.
This can be done using the command transform ="translate (2.5 2)"
Add raster map to svg
<image xlink:href="https://i.stack.imgur.com/ylp6r.png" width="100%" height="100%" />
Clone and simultaneously position icons on the map
<use x="300" y="110" xlink:href="#bicicle" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 761">
<image xlink:href="https://i.stack.imgur.com/ylp6r.png" width="100%" height="100%" />
<defs>
<filter id="a" width="154.5%" height="509.1%" x="-27.3%" y="-204.5%" filterUnits="objectBoundingBox">
<feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
</filter>
<g id="bicycle">
<ellipse cx="15" cy="37.467" fill="#999" fill-opacity=".9" filter="url(#a)" rx="11" ry="1.467"/>
<path fill="#006893" fill-rule="nonzero" stroke="#006893" d="M15 0C6.448 0 0 6.759 0 15.726c0 11.28 13.944 21.44 14.537 21.867.138.1.302.149.463.149a.784.784 0 0 0 .463-.15C16.055 37.167 30 27.007 30 15.727 30 6.76 23.552 0 15 0z"/>
<path transform="translate(2.5 2)" fill="#fff" d="M5.5,6.137a1,1,0,0,0,0,2H6.909a.249.249,0,0,1,.231.156l.637,1.568a.251.251,0,0,1-.036.25l-.35.437a.25.25,0,0,1-.3.07A4.894,4.894,0,0,0,5,10.137a5,5,0,1,0,4.856,6.19.25.25,0,0,1,.243-.19h.4a1,1,0,0,0,.807-.409l4.281-5.837a.247.247,0,0,1,.236-.1.252.252,0,0,1,.2.161l.281.762a.251.251,0,0,1-.095.293,4.978,4.978,0,1,0,2.79-.87,3.824,3.824,0,0,0-.549.046.25.25,0,0,1-.27-.161L16.92,6.6a.249.249,0,0,1,.174-.329l1.742-.435a1,1,0,0,0-.485-1.941L15.8,4.532a1.5,1.5,0,0,0-1.042,1.974l.08.217a.253.253,0,0,1-.008.193.25.25,0,0,1-.142.129L9.764,8.8a.251.251,0,0,1-.316-.141l-.113-.279A.178.178,0,0,1,9.5,8.137a1,1,0,0,0,0-2Zm-.5,12a3,3,0,1,1,2.658-4.364.25.25,0,0,1-.222.364H5a1,1,0,0,0,0,2H7.436a.25.25,0,0,1,.222.364A2.985,2.985,0,0,1,5,18.137Zm5.049-4.076a.1.1,0,0,1-.174-.036,4.941,4.941,0,0,0-.927-1.916.249.249,0,0,1,0-.309l.609-.761a.252.252,0,0,1,.111-.08L12.5,9.95a.25.25,0,0,1,.286.383ZM19,18.137a3,3,0,0,1-3-3,2.959,2.959,0,0,1,.8-2.022.249.249,0,0,1,.417.084l.842,2.284a1,1,0,1,0,1.876-.692l-.964-2.617a.028.028,0,0,1,0-.025A.028.028,0,0,1,19,12.137a3,3,0,0,1,0,6Z"/>
</g>
</defs>
<use x="300" y="110" xlink:href="#bicycle" />
<use x="650" y="200" xlink:href="#bicycle" />
<use x="650" y="450" xlink:href="#bicycle" />
<use x="150" y="250" xlink:href="#bicycle" />
</svg>
UPDATE
When cloning icons, they can be styled.
To do this, delete the attribute fill ="#006893" at the parent and paint the children in different colors
<use x="300" y="110" fill="red" xlink:href="#bicycle" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 761">
<image xlink:href="https://i.stack.imgur.com/ylp6r.png" width="100%" height="100%" />
<defs>
<filter id="a" width="154.5%" height="509.1%" x="-27.3%" y="-204.5%" filterUnits="objectBoundingBox">
<feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
</filter>
<g id="bicycle">
<ellipse cx="15" cy="37.467" fill="#999" fill-opacity=".9" filter="url(#a)" rx="11" ry="1.467"/>
<path fill-rule="nonzero" stroke="#006893" d="M15 0C6.448 0 0 6.759 0 15.726c0 11.28 13.944 21.44 14.537 21.867.138.1.302.149.463.149a.784.784 0 0 0 .463-.15C16.055 37.167 30 27.007 30 15.727 30 6.76 23.552 0 15 0z"/>
<path transform="translate(2.5 2)" fill="#fff" d="M5.5,6.137a1,1,0,0,0,0,2H6.909a.249.249,0,0,1,.231.156l.637,1.568a.251.251,0,0,1-.036.25l-.35.437a.25.25,0,0,1-.3.07A4.894,4.894,0,0,0,5,10.137a5,5,0,1,0,4.856,6.19.25.25,0,0,1,.243-.19h.4a1,1,0,0,0,.807-.409l4.281-5.837a.247.247,0,0,1,.236-.1.252.252,0,0,1,.2.161l.281.762a.251.251,0,0,1-.095.293,4.978,4.978,0,1,0,2.79-.87,3.824,3.824,0,0,0-.549.046.25.25,0,0,1-.27-.161L16.92,6.6a.249.249,0,0,1,.174-.329l1.742-.435a1,1,0,0,0-.485-1.941L15.8,4.532a1.5,1.5,0,0,0-1.042,1.974l.08.217a.253.253,0,0,1-.008.193.25.25,0,0,1-.142.129L9.764,8.8a.251.251,0,0,1-.316-.141l-.113-.279A.178.178,0,0,1,9.5,8.137a1,1,0,0,0,0-2Zm-.5,12a3,3,0,1,1,2.658-4.364.25.25,0,0,1-.222.364H5a1,1,0,0,0,0,2H7.436a.25.25,0,0,1,.222.364A2.985,2.985,0,0,1,5,18.137Zm5.049-4.076a.1.1,0,0,1-.174-.036,4.941,4.941,0,0,0-.927-1.916.249.249,0,0,1,0-.309l.609-.761a.252.252,0,0,1,.111-.08L12.5,9.95a.25.25,0,0,1,.286.383ZM19,18.137a3,3,0,0,1-3-3,2.959,2.959,0,0,1,.8-2.022.249.249,0,0,1,.417.084l.842,2.284a1,1,0,1,0,1.876-.692l-.964-2.617a.028.028,0,0,1,0-.025A.028.028,0,0,1,19,12.137a3,3,0,0,1,0,6Z"/>
</g>
</defs>
<use x="300" y="110" fill="red" xlink:href="#bicycle" />
<use x="650" y="200" fill="dodgerblue" xlink:href="#bicycle" />
<use x="650" y="450" fill="purple" xlink:href="#bicycle" />
<use x="150" y="250" fill="green" xlink:href="#bicycle" />
</svg>
Related
How to resize only 1 part of a SVG in order to fill the content
I understand that SVG actually doesn't have a content, but I am struglying with this problem and I can't solve during days.
I have a Figma (so I can get the SVG) with this design:
The problem is that "Your Collection" text needs to grow to the right in some situations, for example: When I translate the app to Spanish and I have to show: "Tu Coleccion", or some other languages with even longer texts.
In the Figma that shape is made by 2 shapes + an "UNION" rule from Figma:
body { background-color: #7fb6ff80;}
<svg width="188" height="71" viewBox="0 0 188 71" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-inside-1_193_1631" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M72.3203 50.6719C68.8459 50.6719 65.7635 52.7341 63.7839 55.5894C57.4655 64.7034 46.9298 70.6719 35 70.6719C15.67 70.6719 0 55.0019 0 35.6719C0 16.342 15.67 0.671936 35 0.671936C46.9298 0.671936 57.4655 6.64051 63.7839 15.7544C65.7635 18.6098 68.8459 20.6719 72.3203 20.6719H173C181.284 20.6719 188 27.3877 188 35.6719C188 43.9562 181.284 50.6719 173 50.6719H72.3203Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M72.3203 50.6719C68.8459 50.6719 65.7635 52.7341 63.7839 55.5894C57.4655 64.7034 46.9298 70.6719 35 70.6719C15.67 70.6719 0 55.0019 0 35.6719C0 16.342 15.67 0.671936 35 0.671936C46.9298 0.671936 57.4655 6.64051 63.7839 15.7544C65.7635 18.6098 68.8459 20.6719 72.3203 20.6719H173C181.284 20.6719 188 27.3877 188 35.6719C188 43.9562 181.284 50.6719 173 50.6719H72.3203Z" fill="white"/>
<path d="M63.7839 15.7544L62.9621 16.3242L63.7839 15.7544ZM62.9621 55.0197C56.8225 63.8757 46.588 69.6719 35 69.6719V71.6719C47.2715 71.6719 58.1085 65.531 64.6057 56.1592L62.9621 55.0197ZM35 69.6719C16.2223 69.6719 1 54.4496 1 35.6719H-1C-1 55.5542 15.1177 71.6719 35 71.6719V69.6719ZM1 35.6719C1 16.8943 16.2223 1.67194 35 1.67194V-0.328064C15.1177 -0.328064 -1 15.7897 -1 35.6719H1ZM35 1.67194C46.588 1.67194 56.8225 7.4682 62.9621 16.3242L64.6057 15.1847C58.1085 5.81283 47.2715 -0.328064 35 -0.328064V1.67194ZM72.3203 21.6719H173V19.6719H72.3203V21.6719ZM173 21.6719C180.732 21.6719 187 27.9399 187 35.6719H189C189 26.8354 181.837 19.6719 173 19.6719V21.6719ZM187 35.6719C187 43.4039 180.732 49.6719 173 49.6719V51.6719C181.837 51.6719 189 44.5085 189 35.6719H187ZM173 49.6719H72.3203V51.6719H173V49.6719ZM62.9621 16.3242C65.0754 19.3724 68.4347 21.6719 72.3203 21.6719V19.6719C69.2571 19.6719 66.4515 17.8471 64.6057 15.1847L62.9621 16.3242ZM64.6057 56.1592C66.4515 53.4968 69.2571 51.6719 72.3203 51.6719V49.6719C68.4347 49.6719 65.0754 51.9714 62.9621 55.0197L64.6057 56.1592Z" fill="#F2F2F2" mask="url(#path-1-inside-1_193_1631)"/>
</svg>
Do you have any idea how could I change the width of that second part in order to fill the content, without changing the circle part?
Do you have any idea how to get this with CSS (without SVG)? The harder part with CSS is the curve that is in the union between the circle and the rectangle. The other part is simple.
I think it would be a good idea to have a "sliding doors" effect. So, here I made patterns for both the circle and the "text label". Switching between patterns with different sizes makes the text label resize.
This can be done dynamically if you look for the size of the text and then update the pattern based on that.
body { background-color: #7fb6ff80;}
svg {
display: block;
}
<svg width="0" height="0" viewBox="0 0 400 104" xmlns="http://www.w3.org/2000/svg">
<pattern id="circle" viewBox="0 0 104 104" width="100%" height="100%">
<path transform="translate(2 2)" stroke="black" stroke-width="2" fill="none"
d="M 102 30 Q 97 30 92 23 Q 76 0 50 0 A 10 10 90 0 0 50 100 Q 76 100 92 77 Q 97 70 102 70"/>
</pattern>
<pattern id="p1_120" viewBox="0 0 400 104" width="100%" height="100%">
<path transform="translate(120 2)" stroke="gray" stroke-width="2" fill="none"
d="M -200 30 H 0 A 1 1 0 0 1 0 70 H -200"/>
</pattern>
<pattern id="p1_140" viewBox="0 0 400 104" width="100%" height="100%">
<path transform="translate(140 2)" stroke="black" stroke-width="2" fill="none"
d="M -200 30 H 0 A 1 1 0 0 1 0 70 H -200"/>
</pattern>
<pattern id="p1_160" viewBox="0 0 400 104" width="100%" height="100%">
<path transform="translate(160 2)" stroke="black" stroke-width="2" fill="none"
d="M -200 30 H 0 A 1 1 0 0 1 0 70 H -200"/>
</pattern>
</svg>
<svg id="svg01" viewBox="0 0 400 104" xmlns="http://www.w3.org/2000/svg">
<rect x="104" width="400" height="104" fill="url(#p1_160)" />
<rect width="104" height="104" fill="url(#circle)"/>
<text x="110" y="53" dominant-baseline="middle" font-size="20"
font-family="sans-serif">Your Collection</text>
</svg>
<svg id="svg02" viewBox="0 0 400 104" xmlns="http://www.w3.org/2000/svg">
<rect x="104" width="400" height="104" fill="url(#p1_140)" />
<rect width="104" height="104" fill="url(#circle)"/>
<text x="110" y="53" dominant-baseline="middle" font-size="20"
font-family="sans-serif">Tu Coleccion</text>
</svg>
SVG fill-rule being ignored
Let's say I have this SVG:
.star g path {
fill-rule: evenodd;
fill: red;
}
<svg class="star" width="99px" height="99px" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="M8.8 8.094l-5.009.73-.113.03a1 1 0 00-.44 1.682l3.623 3.529-.85 4.986-.013.11a1 1 0 001.44.944L12 17.746l4.48 2.355.1.047a1 1 0 001.35-1.101l-.855-4.986 3.624-3.529.078-.085a1 1 0 00-.631-1.62l-5.01-.733-2.238-4.537a1 1 0 00-1.794 0L8.864 8.094zM12 6.258l1.575 3.193.061.106a1 1 0 00.691.44l3.524.515-2.549 2.484-.082.09a1 1 0 00-.206.795l.601 3.506-3.15-1.656-.111-.05a1 1 0 00-.82.05l-3.15 1.656.602-3.506.013-.122a1 1 0 00-.301-.763l-2.55-2.484 3.525-.515a1 1 0 00.752-.546L12 6.258z" />
</g>
</svg>
How do I go about filling the inside of the shape (without changing the svg source)? I've tried this without success:
Your star has two outer and inner contours.
Therefore, only the space between the contours will be filled with color.
To avoid this you need as #enxaneta commented:
remove everithing from the secomd M command: use just the first part
of the d attribute d="M8.8 8.094l-5.009.73-.113.03a1 1 0 00-.44
1.682l3.623 3.529-.85 4.986-.013.11a1 1 0 001.44.944L12 17.746l4.48 2.355.1.047a1 1 0 001.35-1.101l-.855-4.986 3.624-3.529.078-.085a1 1 0 00-.631-1.62l-5.01-.733-2.238-4.537a1 1 0 00-1.794 0L8.864 8.094z
<style>
.star g path {
fill:red;
}
<svg class="star" width="99px" height="99px" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g>
<path fill="red" d="M8.8 8.094l-5.009.73-.113.03a1 1 0 00-.44 1.682l3.623 3.529-.85 4.986-.013.11a1 1 0 001.44.944L12 17.746l4.48 2.355.1.047a1 1 0 001.35-1.101l-.855-4.986 3.624-3.529.078-.085a1 1 0 00-.631-1.62l-5.01-.733-2.238-4.537a1 1 0 00-1.794 0L8.864 8.094z"/>
</g>
</svg>
As a bonus Examples of animation of filling a star
feFlood flood-color="red" - Implements fill with color
The feOffset filter animates the color filling process by changing the dx dy attributes
#1. Vertical fill animation
.star g path {
fill:white;
stroke:red;
filter: url(#red_fill);
}
<svg class="star" width="99px" height="99px" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="border: 1px solid">
<filter id="red_fill" x="-10%" y="-10%" width="150%" height="150%">
<feFlood flood-color="red" />
<feOffset dy="-24">
<animate
id="anim"
attributeName="dy"
values="-24;0"
dur="5s"
begin="0s"
repeatCount="indefinite"
restart="whenNotActive"
fill="freeze"/>
</feOffset>
<feComposite operator="in" in2="SourceGraphic" />
<feComposite operator="over" in2="SourceGraphic" />
</filter>
<g>
<path d="M8.8 8.094l-5.009.73-.113.03a1 1 0 00-.44 1.682l3.623 3.529-.85 4.986-.013.11a1 1 0 001.44.944L12 17.746l4.48 2.355.1.047a1 1 0 001.35-1.101l-.855-4.986 3.624-3.529.078-.085a1 1 0 00-.631-1.62l-5.01-.733-2.238-4.537a1 1 0 00-1.794 0L8.864 8.094z"/>
</g>
</svg>
#2.Color fill horizontal animation
.star g path {
fill:white;
stroke:gold;
filter: url(#red_fill);
}
<svg class="star" width="99px" height="99px" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="border: 1px solid">
<filter id="red_fill" x="-10%" y="-10%" width="150%" height="150%">
<feFlood flood-color="gold" />
<feOffset dx="-24">
<animate
id="anim"
attributeName="dx"
values="-24;0"
dur="5s"
begin="0s"
repeatCount="indefinite"
restart="whenNotActive"
fill="freeze"/>
</feOffset>
<feComposite operator="in" in2="SourceGraphic" />
<feComposite operator="over" in2="SourceGraphic" />
</filter>
<g>
<path d="M8.8 8.094l-5.009.73-.113.03a1 1 0 00-.44 1.682l3.623 3.529-.85 4.986-.013.11a1 1 0 001.44.944L12 17.746l4.48 2.355.1.047a1 1 0 001.35-1.101l-.855-4.986 3.624-3.529.078-.085a1 1 0 00-.631-1.62l-5.01-.733-2.238-4.537a1 1 0 00-1.794 0L8.864 8.094z"/>
</g>
</svg>
How can I select a specific part in my svg imported with ReactComponent as Logo?
Context:
I have a design file with a Logo that is also the navigation. It's styled like a hexagon grid where each hexagon is a menu which the user can hover and click.
I exported it with Adobe XD like this: "Export - selected - SVG + Presentation Attributes + Embedded"
Then I imported this whole hexagon as one svg into my projects asset folder. So I have different path's and groups with id's in this svg.
The question:
I found out that in react you can use svg like this import { ReactComponent as Logo } from "./myLogo.svg"
When I do this, how can I then select a specific tile of the hexagon grid with use tag?
I tried it like this:
<Logo height="300" width="300">
<use xlinkHref="CCO_Club" fill="orange" />
</Logo>
But this won't work (also not with #CCO_CLUB selector. Fill is doing nothing on that tile. Also when I set a fill on the <Logo fill="orange" ... /> itself it does nothing.
How can I create this effect? I want to achieve a different color for each tile when I hover on it. But before that I have to know how I even can change the color manually.
Here is the svg (cut off at the end because it's limited to 30.000 lines):
<svg xmlns="http://www.w3.org/2000/svg" width="709" height="679.4" viewBox="0 0 709 679.4" fill="currentColor">
<g id="Gruppe_118" data-name="Gruppe 118" transform="translate(-84.2 -202)">
<g id="CCO-cloud" transform="translate(570 411)">
<path id="Pfad_109" data-name="Pfad 109" d="M19.7,83.6l103-59,97.8,59V197.2l-97.6,58L22.3,198.3Z" transform="translate(-11 -12)" fill="#fff"/>
<path id="Pfad_110" data-name="Pfad 110" d="M11,76.4,33.9,89.7V191.9L11,205.3Z" transform="translate(-11 -12)" fill="#999"/>
<path id="Pfad_111" data-name="Pfad 111" d="M234.2,205.3l-24.1-13.4V89.7l24.1-13.3Z" transform="translate(-11 -12)" fill="#999" opacity="0.8"/>
<path id="Pfad_112" data-name="Pfad 112" d="M122.6,12V39.6L33.9,89.7,11,76.5Z" transform="translate(-11 -12)" fill="#999" opacity="0.8"/>
<path id="Pfad_113" data-name="Pfad 113" d="M234.2,76.4,210.1,89.7,122.6,39.6V12Z" transform="translate(-11 -12)" fill="#999"/>
<path id="Pfad_114" data-name="Pfad 114" d="M11,205.3l22.9-13.4L122.6,241v28.8Z" transform="translate(-11 -12)" fill="#999" opacity="0.8"/>
<path id="Pfad_115" data-name="Pfad 115" d="M122.6,269.8V241l87.5-49.1,24.1,13.4Z" transform="translate(-11 -12)" fill="#999"/>
<g id="Gruppe_49" data-name="Gruppe 49" transform="translate(-11 -12)">
<path id="Pfad_116" data-name="Pfad 116" d="M181.7,109.7a13.931,13.931,0,0,0-4.8-9.5c-1-.7-2-1.4-3-2a14.432,14.432,0,0,0-7.4-1.4l-3.6.8a12.272,12.272,0,0,0-2.6,1.2,23.359,23.359,0,0,0-6.3-8.9c-1.7-1.1-3.4-2.3-5.1-3.4a23.468,23.468,0,0,0-12.2-2.4l-5.9,1.3a25.5,25.5,0,0,0-4.2-4.5c-2.1-1.4-4.2-2.8-6.4-4.3a29.385,29.385,0,0,0-15.4-3c-2.5.5-5,1.1-7.5,1.6a28.581,28.581,0,0,0-12.4,8.4,28.9,28.9,0,0,0-6.5,12.5H77.1c-1.2.3-2.4.5-3.6.8a15.1,15.1,0,0,0-6,4A14.436,14.436,0,0,0,64,111.4a14.158,14.158,0,0,0,4.8,9.6c1,.7,2,1.4,3.1,2.1a14.629,14.629,0,0,0,7.4,1.4c1.2-.3,2.4-.5,3.6-.8a14.722,14.722,0,0,0,2.2-1,29.49,29.49,0,0,0,2.5,2.5c2.1,1.4,4.2,2.9,6.4,4.3a29.385,29.385,0,0,0,15.4,3c2.5-.5,5-1.1,7.5-1.6a29.64,29.64,0,0,0,8.2-4.5c1,.7,2,1.3,3,2a23.468,23.468,0,0,0,12.2,2.4c2-.4,4-.8,6-1.3a23.909,23.909,0,0,0,9.9-6.7,15.583,15.583,0,0,0,1.6-2l.5.5c1,.7,2,1.4,3,2a14.432,14.432,0,0,0,7.4,1.4l3.6-.8a14.105,14.105,0,0,0,5.9-4A12.96,12.96,0,0,0,181.7,109.7Z" fill="#999" opacity="0.6"/>
<g id="Gruppe_48" data-name="Gruppe 48" opacity="0.6">
<path id="Pfad_117" data-name="Pfad 117" d="M111.6,82.5c4.8,1.8,9.1,4.3,11.9,8.6A15.781,15.781,0,0,0,113,77.3a15.592,15.592,0,0,0-16.6,4.9A25.423,25.423,0,0,1,111.6,82.5Z" fill="#999" opacity="0.8"/>
<path id="Pfad_118" data-name="Pfad 118" d="M173,114.6a21.29,21.29,0,0,1-15.8-7.3,20.936,20.936,0,0,1-18.5,11.3,20.53,20.53,0,0,1-11.2-3.4,9.97,9.97,0,0,0,6.7-7.6,16.27,16.27,0,0,1-8.7,4.5,15.092,15.092,0,0,1-9.4-1.2,9.926,9.926,0,0,0,7.1,4.6,20.441,20.441,0,0,1-30.8-.2,9.972,9.972,0,0,0,7.7-5.1,15.736,15.736,0,0,1-9.5,1.7,14.871,14.871,0,0,1-8.5-3.9,9.8,9.8,0,0,0,4.9,6.2,22.363,22.363,0,0,1-5.1.7,20.587,20.587,0,0,1-17.1-9.2,13.584,13.584,0,0,0-.7,5.7,14.158,14.158,0,0,0,4.8,9.6c1,.7,2,1.4,3.1,2.1a14.629,14.629,0,0,0,7.4,1.4c1.2-.3,2.4-.5,3.6-.8a14.722,14.722,0,0,0,2.2-1,29.49,29.49,0,0,0,2.5,2.5c2.1,1.4,4.2,2.9,6.4,4.3a29.385,29.385,0,0,0,15.4,3c2.5-.5,5-1.1,7.5-1.6a29.64,29.64,0,0,0,8.2-4.5c1,.7,2,1.3,3,2a23.468,23.468,0,0,0,12.2,2.4c2-.4,4-.8,6-1.3a23.909,23.909,0,0,0,9.9-6.7,15.583,15.583,0,0,0,1.6-2l.5.5c1,.7,2,1.4,3,2a14.432,14.432,0,0,0,7.4,1.4l3.6-.8a14.105,14.105,0,0,0,5.9-4,14.307,14.307,0,0,0,3.4-7.5A17.583,17.583,0,0,1,173,114.6Z" fill="#999" opacity="0.8"/>
</g>
</g>
<g id="Gruppe_50" data-name="Gruppe 50" transform="translate(-11 -12)">
<path id="Pfad_119" data-name="Pfad 119" d="M93.1,184.4c0,5.8-2.6,8.7-7.6,8.7-5.1,0-7.6-2.9-7.6-8.7V160.2c0-5.8,2.5-8.7,7.6-8.7s7.6,2.9,7.6,8.7v5.7H87.2v-5.7c0-1.5-.6-2.3-1.7-2.3h0c-1.1,0-1.7.8-1.7,2.3v24.2c0,1.5.6,2.3,1.7,2.3,1.2,0,1.8-.8,1.8-2.3v-5.7h5.9Z" fill="#999"/>
<path id="Pfad_120" data-name="Pfad 120" d="M97.1,192.5V152.1H103V186h8v6.4Z" fill="#999"/>
<path id="Pfad_121" data-name="Pfad 121" d="M128.9,184.4c0,5.8-2.6,8.7-7.6,8.7-5.1,0-7.6-2.9-7.6-8.7V160.2c0-5.8,2.5-8.7,7.6-8.7s7.6,2.9,7.6,8.7ZM123,160.3c0-1.5-.6-2.3-1.7-2.3h0c-1.1,0-1.7.8-1.7,2.3v24.2c0,1.5.6,2.3,1.7,2.3,1.2,0,1.8-.8,1.8-2.3Z" fill="#999"/>
<path id="Pfad_122" data-name="Pfad 122" d="M148.3,184.5c0,5.8-2.6,8.7-7.6,8.7-5.1,0-7.6-2.9-7.6-8.7V152.2H139v32.3c0,1.5.6,2.3,1.7,2.3,1.2,0,1.8-.8,1.8-2.3V152.2h5.9Z" fill="#999"/>
<path id="Pfad_123" data-name="Pfad 123" d="M152.7,152.2h8.2c4.7,0,7.1,2.9,7.1,8.7v22.9c0,5.8-2.5,8.7-7.4,8.7h-7.9Zm5.9,6.4v27.5h1.8c1.2,0,1.7-.8,1.7-2.3V160.9c0-1.5-.6-2.3-1.7-2.3Z" fill="#999"/>
</g>
</g>
<g id="CCO_Club" transform="translate(207 202)">
<path fill="#fff" id="Pfad_124" data-name="Pfad 124" d="M19.7,83.6l103-59,97.8,59V197.2l-97.6,58L22.3,198.3Z" transform="translate(-12.1 -13.8)" />
<g id="Gruppe_52" data-name="Gruppe 52" transform="translate(-12.1 -13.8)">
<g id="Gruppe_51" data-name="Gruppe 51">
<path id="Pfad_125" data-name="Pfad 125" d="M12.1,77.7,34.8,90.9V192.4L12.1,205.7Z" />
<path id="Pfad_126" data-name="Pfad 126" d="M233.7,205.7l-24-13.3V90.9l24-13.2Z" opacity="0.8"/>
<path id="Pfad_127" data-name="Pfad 127" d="M122.9,13.8V41.2L34.8,90.9,12.1,77.8Z" opacity="0.8"/>
<path id="Pfad_128" data-name="Pfad 128" d="M233.7,77.7l-24,13.2L122.9,41.2V13.8Z" />
<path id="Pfad_129" data-name="Pfad 129" d="M12.1,205.7l22.7-13.3,88.1,48.7v28.6Z" opacity="0.8"/>
<path id="Pfad_130" data-name="Pfad 130" d="M122.9,269.7V241.1l86.8-48.7,24,13.3Z" />
</g>
</g>
<g id="Gruppe_53" data-name="Gruppe 53" transform="translate(-12.1 -13.8)">
<path id="Pfad_131" data-name="Pfad 131" d="M102,183.9c0,6-2.6,9-7.9,9s-7.9-3-7.9-9v-25c0-6,2.6-9,7.9-9s7.9,3,7.9,9v5.9H95.9v-5.9c0-1.6-.6-2.3-1.8-2.4h0q-1.8,0-1.8,2.4v25q0,2.4,1.8,2.4t1.8-2.4V178H102Z" />
<path id="Pfad_132" data-name="Pfad 132" d="M106.2,192.3V150.5h6.1v35.1h8.3v6.7Z" />
<path id="Pfad_133" data-name="Pfad 133" d="M139.3,183.9c0,6-2.6,9-7.9,9s-7.9-3-7.9-9V150.5h6.1v33.4q0,2.4,1.8,2.4t1.8-2.4V150.5h6.1Z" />
<path id="Pfad_134" data-name="Pfad 134" d="M143.9,150.6h8.4c4.9,0,7.4,3,7.4,9v6.2c0,2.8-.8,4.7-2.5,5.7,1.6,1,2.5,2.9,2.5,5.7v6.2c0,6-2.6,9-7.7,9h-8.1Zm6.1,24.2v10.9h1.8q1.8,0,1.8-2.4v-6.2a2.118,2.118,0,0,0-1.2-2.2,3.808,3.808,0,0,0-1.3-.1Zm0-17.6v10.9h1.2a3.808,3.808,0,0,0,1.3-.1,2.118,2.118,0,0,0,1.2-2.2v-6.2q0-2.4-1.8-2.4Z"/>
</g>
<g id="Gruppe_54" data-name="Gruppe 54" transform="translate(-12.1 -13.8)">
<path id="Pfad_135" data-name="Pfad 135" d="M122.9,130.8H106.4l-2.7,5.6h38.1l-3.6-5.6Z" />
<path id="Pfad_136" data-name="Pfad 136" d="M122.9,76.3H85.3v44.4h75.2V76.3Z" />
<path id="Pfad_137" data-name="Pfad 137" d="M127.9,129.8v-8.2H117.4v8.2h10.5Z" />
</g>
<path id="Pfad_138" data-name="Pfad 138" d="M155.4,116.9h-65V80.2h65Z" transform="translate(-12.1 -13.8)" fill="#fff"/>
</g>
<g id="CCO_Gaming" transform="translate(449 624)">
<path id="Pfad_139" data-name="Pfad 139" d="M19.7,83.6l103-59,97.8,59V197.2l-97.6,58L22.3,198.3Z" transform="translate(-12.1 -13.8)" fill="#fff"/>
<path id="Pfad_140" data-name="Pfad 140" d="M12.1,77.7,34.8,90.9V192.4L12.1,205.7Z" transform="translate(-12.1 -13.8)" fill="#999"/>
<path id="Pfad_141" data-name="Pfad 141" d="M233.7,205.7l-24-13.3V90.9l24-13.2Z" transform="translate(-12.1 -13.8)" fill="#999" opacity="0.8"/>
<path id="Pfad_142" data-name="Pfad 142" d="M122.9,13.8V41.2L34.8,90.9,12.1,77.8Z" transform="translate(-12.1 -13.8)" fill="#999" opacity="0.8"/>
<path id="Pfad_143" data-name="Pfad 143" d="M233.7,77.7l-24,13.2L122.9,41.2V13.8Z" transform="translate(-12.1 -13.8)" fill="#999"/>
<path id="Pfad_144" data-name="Pfad 144" d="M12.1,205.7l22.7-13.3,88.1,48.7v28.6Z" transform="translate(-12.1 -13.8)" fill="#999" opacity="0.8"/>
<path id="Pfad_145" data-name="Pfad 145" d="M122.9,269.7V241.1l86.8-48.7,24,13.3Z" transform="translate(-12.1 -13.8)" fill="#999"/>
<g id="Gruppe_55" data-name="Gruppe 55" transform="translate(-12.1 -13.8)">
<path id="Pfad_146" data-name="Pfad 146" d="M78.7,174.6h6.8v12.3c0,4.6-2.3,7-7,7-4.6,0-7-2.3-7-7V167.5c0-4.6,2.3-7,7-7,4.6,0,7,2.3,7,7v4.6H80.1v-4.6c0-1.2-.5-1.8-1.6-1.8h0c-1,0-1.6.6-1.6,1.8v19.4c0,1.2.5,1.8,1.6,1.8s1.6-.6,1.6-1.8v-7.1H78.7Z" fill="#999"/>
<path id="Pfad_147" data-name="Pfad 147" d="M102.9,183.1l1.5,10.2H99l-.9-5.9h-4l-.9,5.9H87.8l1.5-10.1,3.3-18.3h7Zm-5.4-.2-1.3-8.6-1.3,8.6Z" fill="#999"/>
<path id="Pfad_148" data-name="Pfad 148" d="M117.6,183.8l5-18.8h5.3v28.4h-5.2V180.3l-3.2,13.1h-3.8l-3.3-13.2v13.2h-5.2V165h5.3Z" fill="#999"/>
<path id="Pfad_149" data-name="Pfad 149" d="M132.1,164.9h5.4v28.4h-5.4Z" fill="#999"/>
<path id="Pfad_150" data-name="Pfad 150" d="M141.7,164.9H147l3.6,14v-14h5v28.4h-5.3l-3.4-13.6v13.6h-5.2V164.9Z" fill="#999"/>
<path id="Pfad_151" data-name="Pfad 151" d="M166.8,176.9h6.7v10.8c0,4.1-2.3,6.1-7,6.1-4.6,0-7-2-7-6.1v-17c0-4.1,2.3-6.1,7-6.1,4.6,0,7,2,7,6.1v4h-5.4v-4a1.389,1.389,0,0,0-1.6-1.6h0a1.427,1.427,0,0,0-1.6,1.6v17a1.6,1.6,0,0,0,3.2,0v-6.2h-1.3Z" fill="#999"/>
</g>
<g id="Gruppe_89" data-name="Gruppe 89" transform="translate(-12.1 -13.8)">
<g id="Gruppe_58" data-name="Gruppe 58">
<g id="Gruppe_57" data-name="Gruppe 57">
<g id="Gruppe_56" data-name="Gruppe 56">
<path id="Pfad_152" data-name="Pfad 152" d="M93.4,138.4H87.8a.472.472,0,0,1-.5-.5v-6.8H80.7a.472.472,0,0,1-.5-.5V125a.472.472,0,0,1,.5-.5h6.6v-6.8a.472.472,0,0,1,.5-.5h5.6a.472.472,0,0,1,.5.5v6.8h6.9a.472.472,0,0,1,.5.5v5.6a.472.472,0,0,1-.5.5H93.9v6.8A.472.472,0,0,1,93.4,138.4Zm-5.2-.9h4.7v-6.8a.472.472,0,0,1,.5-.5h6.9v-4.7H93.4a.472.472,0,0,1-.5-.5v-6.8H88.2V125a.472.472,0,0,1-.5.5H81.1v4.7h6.6a.472.472,0,0,1,.5.5Z" fill="none" stroke="#999" stroke-miterlimit="10" stroke-width="2"/>
</g>
</g>
</g>
<g id="Gruppe_61" data-name="Gruppe 61">
<g id="Gruppe_60" data-name="Gruppe 60">
<g id="Gruppe_59" data-name="Gruppe 59">
<path id="Pfad_153" data-name="Pfad 153" d="M150.5,149.5a22.261,22.261,0,0,1-17.9-9H109.1a22.383,22.383,0,1,1-17.9-35.8c.9,0,1.8.1,2.8.2h53.8a24.519,24.519,0,0,1,2.7-.2,22.4,22.4,0,0,1,0,44.8Zm-41.6-9.9h24a.758.758,0,0,1,.4.2,21.4,21.4,0,1,0,17.3-34,26.455,26.455,0,0,0-2.7.2H94c-1-.1-1.9-.2-2.7-.2a21.4,21.4,0,1,0,17.3,34C108.6,139.6,108.7,139.6,108.9,139.6Z" fill="none" stroke="#999" stroke-miterlimit="10" stroke-width="2"/>
</g>
</g>
</g>
<g id="Gruppe_64" data-name="Gruppe 64">
<g id="Gruppe_63" data-name="Gruppe 63">
<g id="Gruppe_62" data-name="Gruppe 62">
<path id="Pfad_154" data-name="Pfad 154" d="M150.7,143.9a16.8,16.8,0,1,1,16.8-16.8A16.772,16.772,0,0,1,150.7,143.9Zm0-32.6a15.9,15.9,0,1,0,15.9,15.9A15.94,15.94,0,0,0,150.7,111.3Z" fill="none" stroke="#999" stroke-miterlimit="10" stroke-width="2"/>
</g>
</g>
</g>
<g id="Gruppe_67" data-name="Gruppe 67">
<g id="Gruppe_66" data-name="Gruppe 66">
<g id="Gruppe_65" data-name="Gruppe 65">
<path id="Pfad_155" data-name="Pfad 155" d="M150.8,124.4a3.5,3.5,0,0,1,0-7,3.543,3.543,0,0,1,3.5,3.5A3.478,3.478,0,0,1,150.8,124.4Zm0-6.1a2.6,2.6,0,1,0,2.6,2.6A2.582,2.582,0,0,0,150.8,118.3Z" fill="none" stroke="#999" stroke-miterlimit="10" stroke-width="2"/>
</g>
</g>
</g>
<g id="Gruppe_70" data-name="Gruppe 70">
<g id="Gruppe_69" data-name="Gruppe 69">
<g id="Gruppe_68" data-name="Gruppe 68">
<path id="Pfad_156" data-name="Pfad 156" d="M158.1,131.1a3.5,3.5,0,0,1,0-7,3.543,3.543,0,0,1,3.5,3.5A3.478,3.478,0,0,1,158.1,131.1Zm0-6.1a2.6,2.6,0,1,0,2.6,2.6A2.647,2.647,0,0,0,158.1,125Z" fill="none" stroke="#999" stroke-miterlimit="10" stroke-width="2"/>
</g>
</g>
</g>
<g id="Gruppe_73" data-name="Gruppe 73">
<g id="Gruppe_72" data-name="Gruppe 72">
<g id="Gruppe_71" data-name="Gruppe 71">
<path id="Pfad_157" data-name="Pfad 157" d="M144.1,131.2a3.5,3.5,0,1,1,3.5-3.5A3.417,3.417,0,0,1,144.1,131.2Zm0-6.1a2.6,2.6,0,1,0,2.6,2.6A2.522,2.522,0,0,0,144.1,125.1Z" fill="none" stroke="#999" stroke-miterlimit="10" stroke-width="2"/>
</g>
</g>
</g>
<g id="Gruppe_76" data-name="Gruppe 76">
<g id="Gruppe_75" data-name="Gruppe 75">
<g id="Gruppe_74" data-name="Gruppe 74">
<path id="Pfad_158" data-name="Pfad 158" d="M151.2,138.2a3.5,3.5,0,1,1,3.5-3.5A3.543,3.543,0,0,1,151.2,138.2Zm0-6.2a2.6,2.6,0,1,0,2.6,2.6A2.647,2.647,0,0,0,151.2,132Z" fill="none" stroke="#999" stroke-miterlimit="10" stroke-width="2"/>
</g>
</g>
</g>
<g id="Gruppe_79" data-name="Gruppe 79">
<g id="Gruppe_78" data-name="Gruppe 78">
<g id="Gruppe_77" data-name="Gruppe 77">
<path id="Pfad_159" data-name="Pfad 159" d="M119.9,106h-.2c-.1-.1-14.2-5.8-13.5-17.9.6-10.5,6.3-12.2,12.8-14.2,1.1-.3,2.2-.7,3.4-1.1a10.4,10.4,0,0,0,6.7-11,7.159,7.159,0,0,0-7-6.6c-.3,0-.5-.2-.4-.5,0-.3.3-.4.5-.4a8.273,8.273,0,0,1,7.9,7.4,11.3,11.3,0,0,1-7.3,12c-1.2.4-2.3.7-3.4,1.1-6.4,1.9-11.5,3.5-12.1,13.4-.7,11.4,12.8,16.9,12.9,16.9.2.1.4.4.3.6A1.546,1.546,0,0,1,119.9,106Z" fill="none" stroke="#999" stroke-miterlimit="10" stroke-width="2"/>
</g>
</g>
</g>
<g id="Gruppe_82" data-name="Gruppe 82">
<g id="Gruppe_81" data-name="Gruppe 81">
<g id="Gruppe_80" data-name="Gruppe 80">
<path id="Pfad_160" data-name="Pfad 160" d="M117,111.8a.472.472,0,0,1-.5-.5V106a.5.5,0,0,1,1,0v5.3A.472.472,0,0,1,117,111.8Z" fill="none" stroke="#999" stroke-miterlimit="10" stroke-width="2"/>
</g>
</g>
</g>
<g id="Gruppe_85" data-name="Gruppe 85">
<g id="Gruppe_84" data-name="Gruppe 84">
<g id="Gruppe_83" data-name="Gruppe 83">
<path id="Pfad_161" data-name="Pfad 161" d="M120,111.8a.472.472,0,0,1-.5-.5V106a.5.5,0,0,1,1,0v5.3A.472.472,0,0,1,120,111.8Z" fill="none" stroke="#999" stroke-miterlimit="10" stroke-width="2"/>
</g>
</g>
</g>
<g id="Gruppe_88" data-name="Gruppe 88">
<g id="Gruppe_87" data-name="Gruppe 87">
<g id="Gruppe_86" data-name="Gruppe 86">
<path id="Pfad_162" data-name="Pfad 162" d="M123,111.8a.472.472,0,0,1-.5-.5V106a.5.5,0,0,1,1,0v5.3A.472.472,0,0,1,123,111.8Z" fill="none" stroke="#999" stroke-miterlimit="10" stroke-width="2"/>
</g>
</g>
</g>
</g>
</g>
<g id="CCO_Logo" transform="translate(328 412)">
<path id="Pfad_163" data-name="Pfad 163" d="M19.7,83.6l103-59,97.8,59V197.2l-97.6,58L22.3,198.3Z" transform="translate(-12.1 -13.8)" fill="#fff"/>
<g id="Gruppe_92" data-name="Gruppe 92" transform="translate(-12.1 -13.8)">
<g id="Gruppe_90" data-name="Gruppe 90">
<path id="Pfad_164" data-name="Pfad 164" d="M12.1,77.7,34.8,90.9V192.3L12.1,205.7Z" fill="#008d36"/>
<path id="Pfad_165" data-name="Pfad 165" d="M233.7,205.7l-24-13.3V90.9l24-13.2Z" fill="#008d36" opacity="0.8"/>
<path id="Pfad_166" data-name="Pfad 166" d="M122.9,13.8V41.2L34.8,90.9,12.1,77.8Z" fill="#008d36" opacity="0.8"/>
<path id="Pfad_167" data-name="Pfad 167" d="M233.7,77.7l-24,13.2L122.9,41.2V13.8Z" fill="#008d36"/>
<path id="Pfad_168" data-name="Pfad 168" d="M12.1,205.7l22.7-13.4,88.1,48.8v28.6Z" fill="#008d36" opacity="0.8"/>
<path id="Pfad_169" data-name="Pfad 169" d="M122.9,269.7V241.1l86.8-48.8,24,13.4Z" fill="#008d36"/>
</g>
<g id="Gruppe_91" data-name="Gruppe 91">
<path id="Pfad_170" data-name="Pfad 170" d="M89.7,164.8c0,11.1-7.4,16.6-22.3,16.7-14.8,0-22.3-5.6-22.3-16.7V118.6c0-11.1,7.4-16.6,22.3-16.6s22.3,5.5,22.3,16.6v10.9H72.5V118.6c0-2.9-1.7-4.3-5.1-4.4h-.1c-3.3,0-5,1.5-5,4.4v46.2c0,2.9,1.7,4.4,5.1,4.4s5.1-1.4,5.1-4.4V153.9H89.7Z" fill="#008d36"/>
<path id="Pfad_171" data-name="Pfad 171" d="M145.2,164.8c0,11.1-7.4,16.6-22.3,16.7-14.8,0-22.3-5.6-22.3-16.7V118.6c0-11.1,7.4-16.6,22.3-16.6s22.3,5.5,22.3,16.6v10.9H128V118.6c0-2.9-1.7-4.3-5.1-4.4h-.1c-3.3,0-5,1.5-5,4.4v46.2c0,2.9,1.7,4.4,5.1,4.4s5.1-1.4,5.1-4.4V153.9h17.2v10.9Z" fill="#008d36"/>
<path id="Pfad_172" data-name="Pfad 172" d="M200.6,164.8c0,11.1-7.4,16.6-22.3,16.7-14.8,0-22.3-5.6-22.3-16.7V118.6c0-11.1,7.4-16.6,22.3-16.6s22.3,5.5,22.3,16.6v46.2Zm-17.2-46.2c0-2.9-1.7-4.3-5.1-4.4h-.1c-3.3,0-5,1.5-5,4.4v46.2c0,2.9,1.7,4.4,5.1,4.4s5.1-1.4,5.1-4.4V118.6Z" fill="#008d36"/>
</g>
</g>
</g>
<g id="CCO_rendering" transform="translate(205 623)">
<path id="Pfad_173" data-name="Pfad 173" d="M19.7,83.6l103-59,97.8,59V197.2l-97.6,58L22.3,198.3Z" transform="translate(-11 -11.3)" fill="#fff"/>
<path id="Pfad_174" data-name="Pfad 174" d="M11,75.8,34,89.1V191.6L11,205.1Z" transform="translate(-11 -11.3)" fill="#999"/>
<path id="Pfad_175" data-name="Pfad 175" d="M234.8,205.1l-24.3-13.5V89.1l24.3-13.3Z" transform="translate(-11 -11.3)" fill="#999" opacity="0.8"/>
<path id="Pfad_176" data-name="Pfad 176" d="M122.9,11.3V38.9L34,89.1,11,75.9Z" transform="translate(-11 -11.3)" fill="#999" opacity="0.8"/>
<path id="Pfad_177" data-name="Pfad 177" d="M234.8,75.9,210.5,89.1,122.9,38.9V11.3Z" transform="translate(-11 -11.3)" fill="#999"/>
<path id="Pfad_178" data-name="Pfad 178" d="M11,205.1l23-13.5,88.9,49.2v28.9Z" transform="translate(-11 -11.3)" fill="#999" opacity="0.8"/>
<path id="Pfad_179" data-name="Pfad 179" d="M122.9,269.7V240.8l87.6-49.2,24.3,13.5Z" transform="translate(-11 -11.3)" fill="#999"/>
<path id="Pfad_180" data-name="Pfad 180" d="M105.6,55" transform="translate(-11 -11.3)" fill="#999"/>
<path id="Pfad_181" data-name="Pfad 181" d="M93.5,122.7l.1-33.6,29.1-16.6,29,16.9-.1,33.5-29.1,16.7Z" transform="translate(-11 -11.3)" fill="#999"/>
<line id="Linie_1" data-name="Linie 1" x1="0.6" y2="35.1" transform="translate(82 77.8)" fill="none"/>
<line id="Linie_2" data-name="Linie 2" x2="32.5" y2="19.4" transform="translate(79.5 75.9)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3"/>
<line id="Linie_3" data-name="Linie 3" x1="28.7" y2="16.6" transform="translate(112 78.1)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3"/>
<line id="Linie_4" data-name="Linie 4" x1="0.1" y2="37.2" transform="translate(111.5 94.7)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3"/>
<g id="Gruppe_93" data-name="Gruppe 93" transform="translate(-11 -11.3)">
<path id="Pfad_182" data-name="Pfad 182" d="M49.6,158.6h7.1c4.4,0,6.6,2.4,6.6,7.1v4.8c0,3-1.2,4.9-3.6,5.8l5.2,15.1H59l-3.7-14.1H55v14.1H49.6Zm5.4,5.2v8.6h.7a2.532,2.532,0,0,0,1.1-.1,1.728,1.728,0,0,0,1-1.8v-4.8c0-1.2-.5-1.9-1.6-1.9Z" fill="#999"/>
<path id="Pfad_183" data-name="Pfad 183" d="M67.6,158.6H80.4v5.2H73v8.6h6.3v5.3H73v8.6h7.4v5.2H67.6Z" fill="#999"/>
<path id="Pfad_184" data-name="Pfad 184" d="M83.8,158.6h5.4l3.6,16.2V158.6h5.1v32.8H92.5L89,175.7v15.7H83.7Z" fill="#999"/>
<path id="Pfad_185" data-name="Pfad 185" d="M102.2,158.6h7.5c4.4,0,6.6,2.4,6.6,7.1v18.6c0,4.7-2.3,7.1-6.9,7.1h-7.3Zm5.5,5.2v22.4h1.6c1.1,0,1.6-.6,1.6-1.8V165.8c0-1.2-.5-1.9-1.6-1.9l-1.6-.1Z" fill="#999"/>
<path id="Pfad_186" data-name="Pfad 186" d="M120.2,158.6H133v5.2h-7.4v8.6h6.3v5.3h-6.3v8.6H133v5.2H120.2Z" fill="#999"/>
<path id="Pfad_187" data-name="Pfad 187" d="M136.5,158.6h7.1c4.4,0,6.6,2.4,6.6,7.1v4.8c0,3-1.2,4.9-3.6,5.8l5.2,15.1h-5.9l-3.7-14.1h-.3v14.1h-5.4Zm5.4,5.2v8.6h.7a2.532,2.532,0,0,0,1.1-.1,1.728,1.728,0,0,0,1-1.8v-4.8c0-1.2-.5-1.9-1.6-1.9Z" fill="#999"/>
<path id="Pfad_188" data-name="Pfad 188" d="M154.6,158.6H160v32.8h-5.4Z" fill="#999"/>
<path id="Pfad_189" data-name="Pfad 189" d="M164.4,158.6h5.4l3.6,16.2V158.6h5.1v32.8h-5.4l-3.5-15.7v15.7h-5.3Z" fill="#999"/>
<path id="Pfad_190" data-name="Pfad 190" d="M189.7,172.5h6.8V185c0,4.7-2.4,7.1-7.1,7.1s-7-2.4-7-7.1V165.3c0-4.7,2.4-7.1,7.1-7.1s7.1,2.4,7.1,7.1V170h-5.4v-4.7c0-1.2-.5-1.9-1.6-1.9h0c-1.1,0-1.6.6-1.6,1.9V185c0,1.2.5,1.8,1.6,1.8s1.6-.6,1.6-1.8v-7.2h-1.4v-5.3Z" fill="#999"/>
</g>
</g>
<g id="CMO-members" transform="translate(449 203)" style="isolation: isolate">
<path id="Pfad_191" data-name="Pfad 191" d="M19.7,83.6l103-59,97.8,59V197.2l-97.6,58L22.3,198.3Z" transform="translate(-10.7 -11.1)" fill="#fff"/>
<g id="Gruppe_94" data-name="Gruppe 94" transform="translate(-10.7 -11.1)">
<path id="Pfad_192" data-name="Pfad 192" d="M131.8,81.3c-.1-.1-.3-.1-.4-.2a10.942,10.942,0,1,0-19.3-
I'd use the SVG inline, which is so much easier to have interaction with rather than trying to use it as an asset.
Here's a codepen demo: https://codepen.io/Wolfmans55/pen/ZEGLMwG
CSS
svg {
/* sizing it down just so it's not massive */
/* you can make an svg responsive by keeping its viewBox attribute */
/* and removing the width and height attributes */
max-width: 600px;
max-height: 600px;
}
/* cloud hover */
svg .cloud:hover path[class^="prefix__st"]:not(.prefix__st0),
svg .cloud:focus path[class^="prefix__st"]:not(.prefix__st0) {
fill: red;
}
/* members hover */
svg .members:hover path[class^="prefix__st"]:not(.prefix__st0),
svg .members:focus path[class^="prefix__st"]:not(.prefix__st0) {
fill: orange;
}
/* club hover */
svg .club:hover path[class^="prefix__st"]:not(.prefix__st0),
svg .club:focus path[class^="prefix__st"]:not(.prefix__st0) {
fill: yellow;
}
/* security hover */
svg .security:hover path[class^="prefix__st"]:not(.prefix__st0),
svg .security:focus path[class^="prefix__st"]:not(.prefix__st0) {
fill: green;
}
/* rendering hover */
svg .rendering:hover path[class^="prefix__st"]:not(.prefix__st0),
svg .rendering:focus path[class^="prefix__st"]:not(.prefix__st0) {
fill: blue;
}
/* gaming hover */
svg .gaming:hover path[class^="prefix__st"]:not(.prefix__st0),
svg .gaming:focus path[class^="prefix__st"]:not(.prefix__st0) {
fill: indigo;
}
/* cco hover */
svg .cco:hover path[class^="prefix__st"]:not(.prefix__st0),
svg .cco:focus path[class^="prefix__st"]:not(.prefix__st0) {
fill: violet;
}
Fill alone won't work as the tiles are made of several paths, each with a fill already defined. One solution would be to define a color filter in the svg:
<filter id="colorize">
<feColorMatrix in="SourceGraphic"
type="matrix"
values="1 0 0 0 0
1 1 0 0 0
0 0 1 0 0
0 0 0 1 0" />
</filter>
And then use it from a css class/any React styling method. e.g.
#CCO-cloud:hover {
filter: url(#colorize);
}
https://codesandbox.io/s/friendly-goodall-s3j07
Shape "8" looped animation with SVG <animate> only
I'm having massive headaches trying to fin the sweet-spot to achieve "8" shape animation using the combination of just <animate attributeName="cx"> and <attributeName="cy">. I'll like to do it using that since it seems, by my metrics, that it's the most performant in terms of FPS, CPU and GPU usage. Quick demo of the "ideal" motion path: https://codepen.io/ivancis/pen/eYmZowz
New solution caused by refinements in comments I need to animate a svg element using just a combination of <animate attributeName="cx"> <animate attributeName="cy"> (for performance) to make an "8" shape motion, looped Since the author does not want to use the animateMotion command, in this case I see only one way to implement the animation of the movement of the circle along the infinity symbol: It is necessary to sequentially select many points along the infinity symbol and assign their coordinates to the circle cx = "x", cy = "y" The more points you select, the closer the trajectory moving of the circle along the infinity symbol In the vector editor, I sequentially put circles on the infinity symbol and wrote down their coordinates of the center of the circle. The first circle has the center coordinates cx ="70" cy ="60" So, it was done for all circles located along the infinity symbol. The last circle has the same coordinates as the first one, thereby realizing a closed cycle It remains only to substitute these values in the animation formulas cx, cy Circle motion animation cx, cy with radius r="5 <div class="group"> <svg class="ball" xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 120 120"> <circle fill="olive" cx="70" cy="60" r="5"> <animate attributeName="cx" attributeType="XML" repeatCount="indefinite" begin="0s" dur="2s" values="70;65;60;55;50;45;40.5;40.5;42.5;45.1;48.7;52;55;58;60;61;61;61;61;61;61;62.9;66;69; 73;76;79;81;80;78;74;70"> </animate> <animate attributeName="cy" attributeType="XML" repeatCount="indefinite" begin="0" dur="2s" values="60;60;60;60;60;58.3;52.5;47.9;44.4;41.8;40.3;40;41;43;47;51;55;60;65;70;74;77;79; 80;80;79;76;72;67;64;61;60"> </animate> </circle> <path fill="none" stroke="black" stroke-dasharray="2" d="M70.5,60.5c5.5,0,10,4.5,10,10s-4.5,10-10,10s-10-4.5-10-10v-20c0-5.5-4.5-10-10-10s-10,4.5-10,10 s4.5,10,10,10H70.5z"/> </svg> </div> Radius r = 40 as in the example of the author of the question <div class="group"> <svg class="ball" xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 120 120"> <circle fill="olive" cx="70" cy="60" r="40"> <animate attributeName="cx" attributeType="XML" repeatCount="indefinite" begin="0s" dur="2s" values="70;65;60;55;50;45;40.5;40.5;42.5;45.1;48.7;52;55;58;60;61;61;61;61;61;61;62.9;66;69; 73;76;79;81;80;78;74;70"> </animate> <animate attributeName="cy" attributeType="XML" repeatCount="indefinite" begin="0" dur="2s" values="60;60;60;60;60;58.3;52.5;47.9;44.4;41.8;40.3;40;41;43;47;51;55;60;65;70;74;77;79; 80;80;79;76;72;67;64;61;60"> </animate> </circle> <path fill="none" stroke="black" stroke-dasharray="2" d="M70.5,60.5c5.5,0,10,4.5,10,10s-4.5,10-10,10s-10-4.5-10-10v-20c0-5.5-4.5-10-10-10s-10,4.5-10,10 s4.5,10,10,10H70.5z"/> </svg> </div>
You didn’t say what kind of animation you really want.
Therefore, I will offer examples of different types of animation and you can choose any them and somehow modify for yourself.
Infinity Symbol Moving Animation
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="100" viewBox="0 0 100 100">
<path fill="none" stroke="dodgerblue" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10">
<animateTransform
attributeName="transform"
type="translate"
values="0; 150; 0"
begin="0s"
dur="4s"
repeatCount="indefinite" />
</path>
</svg>
Rotation
Mouse over symbol
.infinity1{
transform-box: fill-box;
transform-origin: center center;
transition: rotate 2s linear ;
}
.infinity1:hover {
animation: spin 2s linear infinite;
}
#keyframes spin {
100% {transform :rotate(360deg);}
}
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<path class="infinity1" fill="none" stroke="dodgerblue" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10" />
</svg>
Rotation around the axis Y
.infinity1{
transform-box: fill-box;
transform-origin: center center;
transition: rotate 2s linear ;
fill:transparent;
}
.infinity1:hover {
animation: spin 2s linear infinite;
}
#keyframes spin {
100% {transform :rotateY(360deg);}
}
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" >
<path class="infinity1" stroke="dodgerblue" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10" />
</svg>
Animation of infinity symbol filling by changing attribute stroke-dasharray
Click on the colored letters in circles
.container {
width:40%;
height="40%";
background:black;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 20 100 100">
<path fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10" />
<!-- The midpoint of the beginning of the animation in the center of the figure. stroke-dashoffset="31.1" -->
<path id="center" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="crimson" stroke-width="10" stroke-dashoffset="31.1" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_C.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Middle point on the left stroke-dashoffset="-159.5" -->
<path id="Left" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="yellowgreen" stroke-width="10" stroke-dashoffset="-159.5" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_L.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Midpoint left top stroke-dashoffset="128.5" -->
<path id="Top" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="gold" stroke-width="10" stroke-dashoffset="128.5" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_T.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Midpoint lower right stroke-dashoffset="192.7" -->
<path id="Bottom" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="dodgerblue" stroke-width="10" stroke-dashoffset="192.7" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_B.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Middle point on the right stroke-dashoffset="223.9" -->
<path id="Bottom" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="purple" stroke-width="10" stroke-dashoffset="223.9" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_R.click" dur="4s" restart="whenNotActive" />
</path>
<g id="btn_L" transform="translate(-17 0)" >
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="25" y="95" font-size="10" fill="green" >L</text>
</g>
<g id="btn_C" transform="translate(3 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="24" y="95" font-size="10" fill="crimson" >C</text>
</g>
<g id="btn_T" transform="translate(23 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="24" y="95" font-size="10" fill="orange" >T</text>
</g>
<g id="btn_B" transform="translate(43 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="25" y="95" font-size="10" fill="dodgerblue" >B</text>
</g>
<g id="btn_R" transform="translate(63 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="25" y="95" font-size="10" fill="purple" >R</text>
</g>
</svg>
</div>
Live Demo
I was looking into a similar thing and came across this answer. #Alexandr_TT's answer got me thinking about a more flexible way to do this, without using a graphics editor (like Inkscape etc.)
I came up with the following idea:
Use the <AnimateMotion/> for the first loop.
Fire a setInterval every X milliseconds and each time it fires to capture the centre point of the circle (from circle.getBoundingClientRect() and svg.matrixTransform())
Push these x and y values to two arrays to capture them
When the AnimateMotion ends, clear the current setInterval and push the first element also to the end of each of the arrays (to close the loop)
Remove the <AnimateMotion/> tag from the DOM
Push these arrays to the values attribute of the <animate id="cx" attributeName="cx" values="" .../> and <animate id="cy" attributeName="cy" values="" .../> tags
begin both of these animate tags with cx.beginElement() and cy.beginElement()
You could just be happy with this performance-wise, or you could copy-paste the DOM elements with their values="..." attributes and save that as your new master file, essentially achieving what #Alexandr_TT did with the graphics editor. Of course, this method I am showing is flexible if you decide to change your path etc.
Demo: https://codepen.io/Alexander9111/pen/VwLaNEN
HTML:
<circle id="circle" class="circle" cx="0" cy="00" r="125">
<animateMotion
path="M162.9,150c6.8-0.2,12.1-5.7,12.1-12.5c0-6.9-5.6-12.5-12.5-12.5c-6.8,0-12.3,5.4-12.5,12.2v25.7 c-0.2,6.8-5.7,12.2-12.5,12.2c-6.9,0-12.5-5.6-12.5-12.5c0-6.8,5.4-12.3,12.1-12.5L162.9,150z"
dur="4s" begin="0s"
epeatCount="1" fill="freeze"
calcMode="linear"
fill="freeze">
</animateMotion>
<animate id="cx" attributeName="cx" values="" dur="4s" repeatCount="indefinite" begin="indefinite"/>
<animate id="cy" attributeName="cy" values="" dur="4s" repeatCount="indefinite" begin="indefinite"/>
</circle>
JS:
const svg = document.querySelector('svg');
const animateElem = document.querySelector('animateMotion');
const circle = document.querySelector('#circle');
const cx = document.querySelector('#cx');
const cy = document.querySelector('#cy');
let myInterval;
let valuesX = [];
let valuesY = [];
function startFunction() {
const box = circle.getBoundingClientRect();
var pt = svg.createSVGPoint();
pt.x = (box.left + box.right) / 2;
pt.y = (box.top + box.bottom) / 2;
var svgP = pt.matrixTransform(svg.getScreenCTM().inverse());
console.log(svgP.x,svgP.y)
valuesX.push(svgP.x);
valuesY.push(svgP.y);
}
function endFunction() {
animateElem.parentNode.removeChild(animateElem);
clearInterval(myInterval)
valuesX.push(valuesX[0]);
valuesY.push(valuesY[0]);
cx.setAttribute('values', valuesX.join('; '));
cy.setAttribute('values', valuesY.join('; '));
circle.setAttribute('cx', 0);
circle.setAttribute('cy', 0);
cx.beginElement();
cy.beginElement();
}
animateElem.addEventListener('beginEvent', () => {
console.log('beginEvent fired');
myInterval = setInterval(startFunction, 50);
})
animateElem.addEventListener('endEvent', () => {
console.log('endEvent fired');
endFunction();
})
Fill an SVG shape with a gradient
How can I apply Linear gradient and drop shadow to this pattern? <svg viewbox="0 0 60 10"> <pattern x="-8" id="waves" patternUnits="userSpaceOnUse" width="10" height="10"> <path d="M0 10 V5 Q2.5 3.5 5 5 T10 5 V10" fill="#FFC338" /> </pattern> <rect x="0" y="0" width="60" height="7" fill="url(#waves)" /> </svg>
As commented by Paul LeBeau, you need to convert the wavy shape to one path, then you can fill the wavy shape with a linear gradient as shown in this example: <svg viewbox="7.5 0 60 10"> <defs> <linearGradient id="gradient"> <stop offset="5%" stop-color="#FFC338" /> <stop offset="95%" stop-color="#FFEA68" /> </linearGradient> </defs> <path fill="url(#gradient)" d="M0 10 V5 Q2.5 2.5 5 5 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 V10" /> </svg>
Try the following: Place all the gradient and pattern definitions within a <defs> block. After the defs block is closed place your visible content tags.
not exactly what you are looking for, but try: <svg viewbox="0 0 100 80"> <defs> <filter id="f1" x="0" y="0" width="140%" height="200%"> <feOffset result="offOut" in="SourceAlpha" dx="8" dy="6" /> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> <pattern x="-8" id="waves" patternUnits="userSpaceOnUse" width="50" height="20"> <path d="M0 10 V5 Q2.5 3.5 5 5 T10 5 V10" fill="url(#grad1)" /> </pattern> </defs> <rect x="0" y="3" width="200" height="20" fill="url(#waves)" filter="url(#f1)" /> </svg> Edit numerical parameters individually to see the effect.