SVG fill-rule being ignored - css
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>
Related
Can I style individual dashes in an SVG path?
Can I style dashes in my SVG path, so that each of them would be slightly irregular? As in the image above? Tried looking for a CSS-only solution. But adding individual elements along the path would work as well
You can make them irregular with a displacement map (see below), or you can find a font with a glyph that you can use and use text along a textPath with that font to make it look like a customized dash. But you can't style each individual dash in a normal path. <svg width="600px" height="400px"> <filter id="custom-stroke"> <feTurbulence baseFrequency= "0.02" type="turbulence" numOctaves="2"/> <feDisplacementMap in="SourceGraphic" xChannelSelector="R" yChannelSelector="G" scale="15"/> <feMorphology operator="erode" radius="1"/> <feMorphology operator="dilate" radius="1" /> <feGaussianBlur stdDeviation="1.5" /> <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 11 -7" result="goo" /> </filter> <g filter="url(#custom-stroke)"> <path fill="none" stroke="blue" stroke-dasharray="10 10" stroke-width="8" d="M 10 10 a 100 80 0 0 1 100 40 200 300 0 0 0 200 100"/> </g> </svg>
<animateMotion rotate="auto"> rotates an SVG element on a <path>
I took my yesterdays answer (see that SO answer for explanation),
simplified it, added Michael his filter, and dabbled a bit with the filter settings.
Question for the SVG experts: Can we get that rotate="auto" value for each "marker" with JS?
If so, each "marker" could be customized to make it "curve" better
JSFiddle: https://jsfiddle.net/WebComponents/7muns9La/
<svg-path-markers count="25" filter>
<svg viewBox="0 0 500 300" style="background:pink;max-height:180px">
<defs><g id="marker"><path fill="green" d="m0 -10q29 4 0 10a8 7 90 110-10z"/></g></defs>
<filter id="F">
<feTurbulence baseFrequency= "0.001" type="turbulence" numOctaves="1"/>
<feDisplacementMap in="SourceGraphic" xChannelSelector="R" yChannelSelector="G" scale="15"/>
<feMorphology operator="erode" radius=".1"/><feMorphology operator="dilate" radius=".1" />
<feGaussianBlur stdDeviation="1"/><feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 11 -7"/>
</filter>
<path fill="none" stroke="black" d="m50 20a10 10 90 00230 100c30-140-160 0-90 120 30 50 370 40 260-60" />
<g id="markers"/>
</svg>
</svg-path-markers>
<script>
customElements.define("svg-path-markers", class extends HTMLElement {
connectedCallback() {
setTimeout(() => { // wait till innerHTML is parsed
this.querySelectorAll("path").forEach( path => {
let duration = "2"; // set to 0.00001 for instant display
let count = ~~this.getAttribute("count");
let filter = this.hasAttribute("filter") ? 'filter="url(#F)"' : '';
let id = path.id || (path.id = this.localName + Math.random()*1e9);
let marker = dist =>
`<use href="#marker" ${filter}>
<animateMotion dur="${duration}" fill="freeze"calcMode="linear"
rotate="auto" keyPoints="0;${dist}" keyTimes="0;1">
<mpath href="#${id}"/></animateMotion></use>`;
this.querySelector("#markers").innerHTML =Array(count).fill(0)
.map((_,i) => marker(i*(1/(count-1)))).join("");
} )
})}})
</script>
Adding animation on my svg, it changes its position
I'm trying to add animation on some groups inside my svg, but after i add the animation my svg changes position. When i try to change it with position absolute tho it doesnt change.
In this code, I add the aimation to the group with the light class. I removed the rest of the code of the svg file so its more simple to show here.
My code:
.svg-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
background-color: white;
}
.svg {
padding-top: 40px;
}
.light {
-webkit-animation: action 1s infinite;
animation: action 1s infinite alternate;
}
#-webkit-keyframes action {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
#keyframes action {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
<div class="svg-container">
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" width="767.74" height="782.925">
<defs>
<linearGradient
id="a"
x1=".771"
y1=".879"
x2=".349"
y2=".103"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#ad81ff" />
<stop offset="1" stop-color="#ffe2ff" stop-opacity=".831" />
</linearGradient>
<linearGradient
id="b"
x1=".73"
y1=".875"
x2="-.036"
y2="-.615"
gradientUnits="objectBoundingBox"
>
<stop offset=".01" />
<stop offset=".13" stop-opacity=".69" />
<stop offset=".25" stop-opacity=".322" />
<stop offset="1" stop-opacity="0" />
</linearGradient>
<linearGradient
id="c"
x1=".496"
y1="-1.57"
x2=".509"
y2="4.41"
gradientUnits="objectBoundingBox"
>
<stop offset=".01" />
<stop offset=".08" stop-opacity=".69" />
<stop offset=".21" stop-opacity=".322" />
<stop offset="1" stop-opacity="0" />
</linearGradient>
</defs>
<path
data-name="Rectangle 3243"
fill="none"
opacity=".25"
d="M0 0h767.74v782.925H0z"
/>
<rect
data-name="Rectangle 3237"
width="383.786"
height="416.279"
rx="26"
transform="translate(214.352 98.244)"
fill="url(#a)"
/>
<g
class="light"
data-name="Group 1182"
transform="rotate(36 263.423 810.556)"
>
<path
data-name="Path 6006"
d="M58.972 24.627a24.534 24.534 0 0 1 1.64 16.443 27.256 27.256 0 0 0 .037 14.644c.441 1.455 1.049 2.858 1.624 4.394l-18.81 10.86c-.69-.871-1.333-1.77-2.059-2.6a25.313 25.313 0 0 0-11.728-7.54 30.7 30.7 0 0 1-10.886-5.525A26.052 26.052 0 0 1 19 15.332a25.956 25.956 0 0 1 1.66-1.241 25.9 25.9 0 0 1 38.308 10.53Z"
fill="#afb9c5"
/>
<path
data-name="Path 6007"
d="M55.293 26.751a24.535 24.535 0 0 1 1.641 16.442 27.256 27.256 0 0 0 .036 14.644c.442 1.456 1.049 2.859 1.624 4.395l-15.13 8.736c-.692-.871-1.334-1.77-2.06-2.601a25.313 25.313 0 0 0-11.728-7.539 30.7 30.7 0 0 1-10.886-5.525A26.052 26.052 0 0 1 19 15.332c.545-.438 1.098-.86 1.66-1.242a25.651 25.651 0 0 1 6.154-2.017A25.934 25.934 0 0 1 55.293 26.75Z"
fill="#e4e8ec"
/>
<circle
data-name="Ellipse 627"
cx="2.861"
cy="2.861"
transform="rotate(-30 137.783 -57.321)"
fill="#afb9c5"
r="2.861"
/>
<path
data-name="Rectangle 2622"
fill="#afb9c5"
d="m32.468 31.618 1.12-.646 16.474 28.534-1.12.647z"
/>
<path
data-name="Path 6029"
d="m31.023 33.105 4.85-2.8-5.21-3.245Z"
fill="#afb9c5"
/>
<path
data-name="Path 6030"
d="m40.69 38.934-2.314 1.336-.675-1.168 2.315-1.337a2.6 2.6 0 0 0 .952-3.551l-1.04-1.802 1.166-.674 1.042 1.804a3.947 3.947 0 0 1-1.445 5.392Z"
fill="#afb9c5"
/>
<path
data-name="Rectangle 2623"
fill="#afb9c5"
d="m37.35 30.887 3.728-2.152 2.153 3.728-3.729 2.152z"
/>
<path
data-name="Path 6031"
d="m43.612 48.247-1.169.675-1.205-2.087a2 2 0 0 0-2.732-.732 3.947 3.947 0 0 1-5.386-1.446l-2.75-4.763 1.168-.675 2.764 4.788a2.6 2.6 0 0 0 3.552.952 3.344 3.344 0 0 1 4.565 1.223Z"
fill="#afb9c5"
/>
<rect
data-name="Rectangle 2624"
width="4.305"
height="4.305"
rx="2.152"
transform="rotate(150 11.67 25.183)"
fill="#afb9c5"
/>
<rect
data-name="Rectangle 2625"
width="27.208"
height="5.666"
rx="2.833"
transform="rotate(-30 155.273 -41.6)"
fill="#ced6dc"
/>
<rect
data-name="Rectangle 2626"
width="24.321"
height="5.064"
rx="2.532"
transform="rotate(-30 163.695 -45.766)"
fill="#ced6dc"
/>
<rect
data-name="Rectangle 2627"
width="21.102"
height="4.392"
rx="2.196"
transform="rotate(-30 170.605 -50.842)"
fill="#ced6dc"
/>
<rect
data-name="Rectangle 2628"
width="27.208"
height="5.666"
rx="2.833"
transform="rotate(-30 155.273 -41.6)"
fill="#ced6dc"
/>
<rect
data-name="Rectangle 2629"
width="24.321"
height="5.064"
rx="2.532"
transform="rotate(-30 163.695 -45.766)"
fill="#ced6dc"
/>
<rect
data-name="Rectangle 2630"
width="21.102"
height="4.392"
rx="2.196"
transform="rotate(-30 170.605 -50.842)"
fill="#ced6dc"
/>
</g>
</svg>
</div>
</div>
Problem in you case is that the g.light element already has a transform property: transform="rotate(36 263.423 810.556)". So the action animation is overwriting the default one that place the bulb icon in the top left.
My recommendation would be to separate the square and bulb in 2 different svg
and align them together by using absolute positioning:
.svg-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
background-color: white;
}
.svg {
position: relative;
padding-top: 40px;
}
.light {
position: absolute;
top: 7%;
right: 30%;
animation: action 1s infinite alternate;
}
#-webkit-keyframes action {
0% {
transform: translateY(0) rotate(40deg);
}
100% {
transform: translateY(-10px) rotate(40deg);
}
}
#keyframes action {
0% {
transform: translateY(0) rotate(40deg);
}
100% {
transform: translateY(-10px) rotate(40deg);
}
}
<div class="svg-container">
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" width="767.74" height="782.925">
<defs>
<linearGradient id="a" x1=".771" y1=".879" x2=".349" y2=".103" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#ad81ff" />
<stop offset="1" stop-color="#ffe2ff" stop-opacity=".831" />
</linearGradient>
<linearGradient id="b" x1=".73" y1=".875" x2="-.036" y2="-.615" gradientUnits="objectBoundingBox">
<stop offset=".01" />
<stop offset=".13" stop-opacity=".69" />
<stop offset=".25" stop-opacity=".322" />
<stop offset="1" stop-opacity="0" />
</linearGradient>
<linearGradient id="c" x1=".496" y1="-1.57" x2=".509" y2="4.41" gradientUnits="objectBoundingBox">
<stop offset=".01" />
<stop offset=".08" stop-opacity=".69" />
<stop offset=".21" stop-opacity=".322" />
<stop offset="1" stop-opacity="0" />
</linearGradient>
</defs>
<path data-name="Rectangle 3243" fill="none" opacity=".25" d="M0 0h767.74v782.925H0z" />
<rect data-name="Rectangle 3237" width="383.786" height="416.279" rx="26" transform="translate(214.352 98.244)" fill="url(#a)" />
</svg>
<svg class="light" width="70" heigth="73">
<g data-name="Group 1182">
<path data-name="Path 6006" d="M58.972 24.627a24.534 24.534 0 0 1 1.64 16.443 27.256 27.256 0 0 0 .037 14.644c.441 1.455 1.049 2.858 1.624 4.394l-18.81 10.86c-.69-.871-1.333-1.77-2.059-2.6a25.313 25.313 0 0 0-11.728-7.54 30.7 30.7 0 0 1-10.886-5.525A26.052 26.052 0 0 1 19 15.332a25.956 25.956 0 0 1 1.66-1.241 25.9 25.9 0 0 1 38.308 10.53Z" fill="#afb9c5" />
<path data-name="Path 6007" d="M55.293 26.751a24.535 24.535 0 0 1 1.641 16.442 27.256 27.256 0 0 0 .036 14.644c.442 1.456 1.049 2.859 1.624 4.395l-15.13 8.736c-.692-.871-1.334-1.77-2.06-2.601a25.313 25.313 0 0 0-11.728-7.539 30.7 30.7 0 0 1-10.886-5.525A26.052 26.052 0 0 1 19 15.332c.545-.438 1.098-.86 1.66-1.242a25.651 25.651 0 0 1 6.154-2.017A25.934 25.934 0 0 1 55.293 26.75Z" fill="#e4e8ec" />
<circle data-name="Ellipse 627" cx="2.861" cy="2.861" transform="rotate(-30 137.783 -57.321)" fill="#afb9c5" r="2.861" />
<path data-name="Rectangle 2622" fill="#afb9c5" d="m32.468 31.618 1.12-.646 16.474 28.534-1.12.647z" />
<path data-name="Path 6029" d="m31.023 33.105 4.85-2.8-5.21-3.245Z" fill="#afb9c5" />
<path data-name="Path 6030" d="m40.69 38.934-2.314 1.336-.675-1.168 2.315-1.337a2.6 2.6 0 0 0 .952-3.551l-1.04-1.802 1.166-.674 1.042 1.804a3.947 3.947 0 0 1-1.445 5.392Z" fill="#afb9c5" />
<path data-name="Rectangle 2623" fill="#afb9c5" d="m37.35 30.887 3.728-2.152 2.153 3.728-3.729 2.152z" />
<path data-name="Path 6031" d="m43.612 48.247-1.169.675-1.205-2.087a2 2 0 0 0-2.732-.732 3.947 3.947 0 0 1-5.386-1.446l-2.75-4.763 1.168-.675 2.764 4.788a2.6 2.6 0 0 0 3.552.952 3.344 3.344 0 0 1 4.565 1.223Z" fill="#afb9c5" />
<rect data-name="Rectangle 2624" width="4.305" height="4.305" rx="2.152" transform="rotate(150 11.67 25.183)" fill="#afb9c5" />
<rect data-name="Rectangle 2625" width="27.208" height="5.666" rx="2.833" transform="rotate(-30 155.273 -41.6)" fill="#ced6dc" />
<rect data-name="Rectangle 2626" width="24.321" height="5.064" rx="2.532" transform="rotate(-30 163.695 -45.766)" fill="#ced6dc" />
<rect data-name="Rectangle 2627" width="21.102" height="4.392" rx="2.196" transform="rotate(-30 170.605 -50.842)" fill="#ced6dc" />
<rect data-name="Rectangle 2628" width="27.208" height="5.666" rx="2.833" transform="rotate(-30 155.273 -41.6)" fill="#ced6dc" />
<rect data-name="Rectangle 2629" width="24.321" height="5.064" rx="2.532" transform="rotate(-30 163.695 -45.766)" fill="#ced6dc" />
<rect data-name="Rectangle 2630" width="21.102" height="4.392" rx="2.196" transform="rotate(-30 170.605 -50.842)" fill="#ced6dc" />
</g>
</svg>
</div>
</div>
flashing color clockwise around svg path
I have an svg quarter circle and I need to make animation so that its border will be changing to #FF00AF with time clockwisely and run all the border infinitely times Is there any elegant way to do that? <svg width="339" height="313" viewBox="0 0 339 313" fill="none" xmlns="http://www.w3.org/2000/svg"> <g filter="url(#filter0_d)"> <path d="M133.015 269.306C95.2823 283.628 54.8411 291 14 291V204C32.8678 202.471 75.793 198.058 96.5517 188.636C122.724 178.701 146.504 164.14 166.536 145.783C186.567 127.427 202.457 105.634 213.297 81.6503C224.138 57.6662 229.718 31.9602 229.718 6H325C325 43.4267 316.956 80.487 301.327 115.065C285.697 149.643 262.789 181.061 233.91 207.525C205.031 233.99 170.747 254.983 133.015 269.306Z" fill="url(#paint0_radial)"/> <path d="M14.75 204.691V290.249C55.2463 290.159 95.3332 282.807 132.748 268.604C170.395 254.315 204.597 233.371 233.404 206.972C262.21 180.574 285.057 149.238 300.643 114.756C316.125 80.5048 324.142 43.8137 324.249 6.75H230.466C230.36 32.5632 224.761 58.1104 213.981 81.9592C203.097 106.039 187.146 127.913 167.042 146.336C146.945 164.754 123.089 179.362 96.84 189.329C86.36 194.08 70.3618 197.547 54.6835 200.019C39.3496 202.436 24.2459 203.91 14.75 204.691Z" stroke="#DB3BB1" stroke-width="1.5"/> </g> <defs> <filter id="filter0_d" x="0" y="0" width="339" height="313" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feFlood flood-opacity="0" result="BackgroundImageFix"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> <feOffset dy="8"/> <feGaussianBlur stdDeviation="7"/> <feComposite in2="hardAlpha" operator="out"/> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0"/> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/> </filter> <radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(169.5 148.5) rotate(90) scale(142.5 155.5)"> <stop offset="0.727873" stop-color="#8C1F6F"/> <stop offset="1" stop-color="#93006C"/> </radialGradient> </defs> </svg>
One way to have the rotation is to rotate the whole SVG - about its top left hand corner.
This snippet uses CSS animation to rotate it continuously from -90 to 90 degrees. Obviously change this to give whatever effect you want.
body {
overflow: hidden;
}
svg {
animation-name: rotate;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: top left;
}
#keyframes rotate {
0% {
transform: rotate(-90deg);
}
100% {
transform: rotate(90deg);
}
}
<svg width="339" height="313" viewBox="0 0 339 313" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M133.015 269.306C95.2823 283.628 54.8411 291 14 291V204C32.8678 202.471 75.793 198.058 96.5517 188.636C122.724 178.701 146.504 164.14 166.536 145.783C186.567 127.427 202.457 105.634 213.297 81.6503C224.138 57.6662 229.718 31.9602 229.718 6H325C325 43.4267 316.956 80.487 301.327 115.065C285.697 149.643 262.789 181.061 233.91 207.525C205.031 233.99 170.747 254.983 133.015 269.306Z" fill="url(#paint0_radial)"/>
<path d="M14.75 204.691V290.249C55.2463 290.159 95.3332 282.807 132.748 268.604C170.395 254.315 204.597 233.371 233.404 206.972C262.21 180.574 285.057 149.238 300.643 114.756C316.125 80.5048 324.142 43.8137 324.249 6.75H230.466C230.36 32.5632 224.761 58.1104 213.981 81.9592C203.097 106.039 187.146 127.913 167.042 146.336C146.945 164.754 123.089 179.362 96.84 189.329C86.36 194.08 70.3618 197.547 54.6835 200.019C39.3496 202.436 24.2459 203.91 14.75 204.691Z" stroke="#DB3BB1" stroke-width="1.5"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0" width="339" height="313" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="8"/>
<feGaussianBlur stdDeviation="7"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(169.5 148.5) rotate(90) scale(142.5 155.5)">
<stop offset="0.727873" stop-color="#8C1F6F"/>
<stop offset="1" stop-color="#93006C"/>
</radialGradient>
</defs>
</svg>
Nesting SVGs with center alignment
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>
SVG how to make container bigger than svg
Have this problem
The blue circle (#Mark) should have black round border. For some reason it is not. Although if it is not a svg sprite but two separate svg elements everything is ok.
SVG:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="r8qna" d="M1351 35.438c0 .983-.815 1.562-1.821 1.562h-4.857c0 .984-.816 1.781-1.822 1.781-1.006 0-1.821-.797-1.821-1.781h-4.857c-1.007 0-1.822-.579-1.822-1.562 0-.846.376-1.649 1.03-2.202 1.17-.99 2.006-3.618 2.006-6.705 0-2.337 1.536-4.318 3.673-5.044A1.806 1.806 0 0 1 1342.5 20c.903 0 1.647.644 1.791 1.487 2.137.726 3.673 2.707 3.673 5.044 0 3.088.837 5.716 2.007 6.705a2.882 2.882 0 0 1 1.03 2.202zm-1.568-.103c0-.34-.15-.663-.414-.886-1.688-1.428-2.737-4.296-2.737-8.024 0-2.039-1.696-3.697-3.78-3.697-2.086 0-3.782 1.658-3.782 3.697 0 3.728-1.049 6.596-2.737 8.023a1.162 1.162 0 0 0-.414.887z"/>
<path id="rfoga" d="M1074.5 101a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z"/>
</defs>
<symbol id="Bell" viewBox="0 0 17 19">
<g>
<g transform="translate(-1334 -20)">
<use fill="#a56ea3" xlink:href="#r8qna"/>
<use fill="#e0e0e0" xlink:href="#r8qna"/>
</g>
</g>
</symbol>
<symbol id="Mark" viewBox="0 0 5 5">
<g>
<g transform="translate(-1072 -101)">
<use fill="#30a1d6" xlink:href="#rfoga"/>
</g>
</g>
</symbol>
</svg>
CSS code
&__bell-icon {
fill: #e0e0e0;
height: 19px;
width: 17px;
}
&__circle-icon {
position: absolute;
visibility: visible;
height: 5px;
width: 5px;
stroke:$icon-stroke-light;
}
HTML code:
<span class="notifications__icons">
<svg class="notifications__bell-icon"><use href="../../../images/BellWithMark.svg#Bell"></svg>
<svg class="notifications__circle-icon"><use href="../../../images/BellWithMark.svg#Mark"></svg>
</span>
Your #Mark symbol is too small. You need to add some space for the stroke. Use <symbol id="Mark" viewBox="-1 -1 7 7"> instead of <symbol id="Mark" viewBox="0 0 5 5">. If needed change CSS accordingly.
I needed to see what happens so I've changed the size of your icons.
.notifications__bell-icon {
fill: #e0e0e0;
height: 190px;
width: 170px;
position: absolute;
}
.notifications__circle-icon {
position: absolute;
visibility: visible;
height: 50px;
width: 50px;
stroke:black;
}
<span class="notifications__icons">
<svg class="notifications__bell-icon"><use href="#Bell"></svg>
<svg class="notifications__circle-icon"><use href="#Mark"></svg>
</span>
<svg>
<defs>
<path id="r8qna" d="M1351 35.438c0 .983-.815 1.562-1.821 1.562h-4.857c0 .984-.816 1.781-1.822 1.781-1.006 0-1.821-.797-1.821-1.781h-4.857c-1.007 0-1.822-.579-1.822-1.562 0-.846.376-1.649 1.03-2.202 1.17-.99 2.006-3.618 2.006-6.705 0-2.337 1.536-4.318 3.673-5.044A1.806 1.806 0 0 1 1342.5 20c.903 0 1.647.644 1.791 1.487 2.137.726 3.673 2.707 3.673 5.044 0 3.088.837 5.716 2.007 6.705a2.882 2.882 0 0 1 1.03 2.202zm-1.568-.103c0-.34-.15-.663-.414-.886-1.688-1.428-2.737-4.296-2.737-8.024 0-2.039-1.696-3.697-3.78-3.697-2.086 0-3.782 1.658-3.782 3.697 0 3.728-1.049 6.596-2.737 8.023a1.162 1.162 0 0 0-.414.887z"/>
<path id="rfoga" d="M1074.5 101a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z"/>
</defs>
<symbol id="Bell" viewBox="0 0 17 19">
<g>
<g transform="translate(-1334 -20)">
<use fill="#a56ea3" xlink:href="#r8qna"/>
<use fill="#e0e0e0" xlink:href="#r8qna"/>
</g>
</g>
</symbol>
<symbol id="Mark" viewBox="-1 -1 7 7">
<g>
<g transform="translate(-1072 -101)">
<use fill="#30a1d6" xlink:href="#rfoga"/>
</g>
</g>
</symbol>
</svg>