SVG take up 400% of screensize - html
I'm trying to make my SVG take up 400% of the screen width and height so I can move it to change the gradient:
SVG
html, body {
margin:0;
padding:0;
overflow:hidden;
}
svg {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
height: 400%;
width: 400%;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="LinearGradient" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad" gradientTransform="rotate(45)">
<stop offset="0%" stop-color="#00cc00" stop-opacity="1" />
<stop offset="100%" stop-color="#006600" stop-opacity="1" />
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" style="fill:url(#LinearGradient);" />
</svg>
However, this doesn't even fill it up 100% of the screen, yet alone 400%!
Just add your SVG CSS inside svg:not(:root). Check updated Snippet below
html, body {
margin:0;
padding:0;
height: 100%;
}
/*svg {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
height: 400%;
width: 400%;
}*/
svg:not(:root) {
width: 400%;
height: 400%;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="LinearGradient" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad" gradientTransform="rotate(45)">
<stop offset="0%" stop-color="#00cc00" stop-opacity="1" />
<stop offset="100%" stop-color="#006600" stop-opacity="1" />
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" style="fill:url(#LinearGradient);" />
</svg>
Related
Responsive <img> for svg has overflow
I am trying to have an <img src="*.svg"> tag to display (any) svg file, however with what I have so far there is some overflow of the svg's viewbox when it fills the width:
If I did not need absolute positioning, it works without any overlfow if you remove display: inline-block and use max-width and max-height, but since I need the image to fill its container, I have to use inline-block.
Thanks in advance for any help .
#inner-map {
display: inline-block;
position: relative;
}
#map-svg {
border-style: solid;
}
#map-svg img {
width: 100%;
height: 80vh;
display: block;
}
#pog-outer {
position: absolute;
}
#pog-inner {
position: absolute;
left:-9px;
top:-9px;
}
<div id="inner-map">
<div id="pog-outer" style="top:58.794%;left:28.915%">
<div id="pog-inner">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="18" height="18">
<defs>
<radialGradient id="Shiny" cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
<stop offset="0%" stop-color="#FFFFFF" />
<stop offset="50%" stop-color="#DD3333" />
<stop offset="75%" stop-color="#990000" />
<stop offset="100%" stop-color="#000000" />
</radialGradient>
</defs>
<circle r="6" cx="9" cy="9" fill="url(#Shiny)" />
</svg>
</div>
</div>
<div id="map-svg">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d5/North_America_laea_location_map.svg">
</div>
</div>
Per the question's comments you want the image to fill the whole container and then if the aspect ratio of the image and its container differ, some edges of the image would overflow and are no longer be visible.
So to get that we'd want the image to have have preserveAspectRatio="xMidYMid slice" on its root element but unfortunately it doesn't. It doesn't have that attribute at all and the default if you have a viewBox is preserveAspectRatio="xMidYMid meet"
We'll need to override that value by using an SVG fragment identifier.
To make the example below more obvious I've also changed the width to width: 70vh; so it always overflows. You probably don't want to do that.
#inner-map {
display: inline-block;
position: relative;
}
#map-svg {
border-style: solid;
}
#map-svg img {
width: 70vh;
height: 80vh;
display: block;
}
#pog-outer {
position: absolute;
}
#pog-inner {
position: absolute;
left:-9px;
top:-9px;
}
<div id="inner-map">
<div id="pog-outer" style="top:58.794%;left:28.915%">
<div id="pog-inner">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="18" height="18">
<defs>
<radialGradient id="Shiny" cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
<stop offset="0%" stop-color="#FFFFFF" />
<stop offset="50%" stop-color="#DD3333" />
<stop offset="75%" stop-color="#990000" />
<stop offset="100%" stop-color="#000000" />
</radialGradient>
</defs>
<circle r="6" cx="9" cy="9" fill="url(#Shiny)" />
</svg>
</div>
</div>
<div id="map-svg">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d5/North_America_laea_location_map.svg#svgView(preserveAspectRatio(xMidYMid slice))">
</div>
</div>
You can replace the height: 80vh; with height: 80% in the element and this way it's going to always hide the non-blue svg part and without making any overflow.
#inner-map {
display: inline-block;
position: relative;
}
#map-svg {
border-style: solid;
}
#map-svg img {
width: 100%;
height: 80%;
display: block;
}
#pog-outer {
position: absolute;
}
#pog-inner {
position: absolute;
left:-9px;
top:-9px;
}
<div id="inner-map">
<div id="pog-outer" style="top:58.794%;left:28.915%">
<div id="pog-inner">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="18" height="18">
<defs>
<radialGradient id="Shiny" cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
<stop offset="0%" stop-color="#FFFFFF" />
<stop offset="50%" stop-color="#DD3333" />
<stop offset="75%" stop-color="#990000" />
<stop offset="100%" stop-color="#000000" />
</radialGradient>
</defs>
<circle r="6" cx="9" cy="9" fill="url(#Shiny)" />
</svg>
</div>
</div>
<div id="map-svg">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d5/North_America_laea_location_map.svg">
</div>
</div>
How to center svg as background?
I have an SVG image (svg tag with path) and I want to make it into a whole-page fixed background. I managed to do that, but unfortunately, it's attached to the left and top side of the page, it's not centered when in mobile, etc.
Is it possible to center it horizontally and vertically?
.gradbg{
min-width:100%;
height:100%;
position:fixed;
top:0;
z-index:-1;
display:flex;
align-items:center;
justify-content:center;
}
.gradString{
object-fit:cover;
width:100%;
height:100%;
}
.gradPath{
fill:url(#Gradient1);
}
<div class="gradbg">
<svg xmlns="http://www.w3.org/2000/svg" class="gradString">
<defs> <linearGradient id="Gradient1">
<stop class="ucpgrad1bg" offset="0%"/>
<stop class="ucpgrad2bg" offset="25%"/>
<stop class="ucpgrad3bg" offset="50%"/>
<stop class="ucpgrad4bg" offset="75%"/>
<stop class="ucpgrad5bg" offset="100%"/>
</linearGradient></defs>
<path class="gradPath" d="M1858.4-39.1c.1,5.4-1.9,10-4.9,14.3-39.2,56.7-66.4,125.1-84.2,191.3-13.6,50.8-21.5,105.5-23.7,157.8s-14.3,107.4-40.7,152c-27.6,46.6-61.2,88.6-95.3,130.5A677.1,677.1,0,0,0,1524.8,740c-8.2,16.9-16,34.2-21.6,52.1-16.8,53.3-11.6,109.5-2,163.5,8.5,48.1,18.8,95.9,28.2,143.7,0-.9-22.1.7-24.4.2-7.2-1.4-6.1-10.3-7.2-16.5q-9.6-57.6-15.1-115.6c-4.8-50.8-8.1-98.8,2.8-149,19.6-90.7,68.4-177.3,125.7-249.5,31.5-39.8,58.9-83,75.5-131.4,2-5.8,3.8-11.7,5.5-17.6,13.6-49,14.6-100.1,20.1-150.4s18.3-101.7,34.9-150.3,38.1-96.5,65.1-140.3c1.3-2.1,9.3-18,11.1-18Z M248.7,1098.9c-1.3-1.7,1.1-3.6,2.7-5.7,3.7-5.2,7.6-10.2,11.6-15.2,8-9.9,16.4-19.4,25.3-28.5a408.6,408.6,0,0,1,57.8-49.7c11.3-8.1,22.6-16.1,33.5-24.8s19.9-18.1,29.7-27.3c29.4-27.2,57.4-55.7,80.5-88.5,8.1-11.5,15.8-23.3,23-35.4,13.7-23.2,24.2-48.5,34.2-73.5s20.3-53.2,29.1-80.3c15.1-46.4,24.6-94.1,46.2-138.1a339.6,339.6,0,0,1,24.5-42.1c4.2-6.3,9.1-12.2,12.9-18.8s9.8-14.2,15.1-20.7c17.4-21.3,37.3-40.3,54.2-62,11.2-14.5,21.5-29.4,33.4-43.4s23.2-29.2,33.9-44.4A320.8,320.8,0,0,0,827.4,245a160.1,160.1,0,0,0,13.7-53.2c1.4-18.9.8-37.8-2.9-56.6C832.8,107,826,79.4,816,52.6c-6.4-17.2-12-34.7-19.9-51.1C790.9-9.1,785.6-19.6,781-30.4a15.4,15.4,0,0,1-1.5-8.7h29a176.6,176.6,0,0,0,9.6,24,117.1,117.1,0,0,1,8.2,21.3c7.4,27.3,17.1,53.8,22.5,81.7a550.9,550.9,0,0,1,9.1,65.1c.8,12-1.1,24.2-2,36.3a145.7,145.7,0,0,1-14.8,53c-8.8,17.6-18.3,34.9-30.2,50.9-8.5,11.6-17.6,22.7-26.8,33.8-4.3,5.2-8.9,10.1-13,15.5l-13.4,17.7c-4.3,4.2-7.7,10-11.4,14.8l-11.5,15.2c-7.7,10.1-15.6,19.6-23.7,29.2a532.4,532.4,0,0,0-62.6,89.5,359.5,359.5,0,0,0-20.3,42.5,209.7,209.7,0,0,0-7.8,25.6c-2.2,9.5-4.3,19.1-6.6,28.7q-6.6,28.6-13.7,57.2c-3.7,15-7.5,29.7-12.3,44.3-16.4,50.8-35.6,100-63.5,145.8-5.8,9.5-12.1,18.4-18.6,27.4s-11.4,15.1-17.2,22.6c-15.9,20.3-36.4,37.9-55.6,55s-40.5,34.4-61.8,50.2c-19.5,14.4-40.7,26.2-59.7,41.4a277,277,0,0,0-31.1,29.2c-4.8,5.3-9.4,10.7-13.8,16.4-2.6,3.2-2.8,4.3-6.8,4.5-2.3.1-8,1.1-9.9,0ZM-8.4,915.7c2.3-.9,3.4-3.1,4.9-4.8,21.1-23.4,43.7-45.3,66.3-67.3,12-11.7,22.8-24.6,34.3-36.9s25.7-25.7,38.3-38.6c14.2-14.6,28.1-29.4,42.1-44.1a228,228,0,0,0,51.9-86c2.7-8,4.4-16.3,7.2-24.1s5.7-17.8,9.2-26.5c6.6-16.9,12.2-34.1,20.8-50.2,7-12.9,17.6-23.2,26.3-34.9s18-18.6,26.9-28,15.3-17.5,23.3-25.9c18.6-19.3,38.1-37.8,58.1-55.7A210.9,210.9,0,0,0,434,355.4c10.6-15.5,20.7-31.3,29.3-48,5.8-11.4,13.3-21.9,19.3-33.2s11.5-22.8,16.5-34.6c13.5-32.2,27.2-66,27.1-101.4-.1-27.8-1.3-55.6-2.1-83.4-.6-21.5-.9-43-2-64.4-.5-10.2.1-19.9,3.4-29.5h29c-8.7,27.9-5.3,56.8-6.8,85.2-1.7,31.1-1.8,62.3-3.4,93.4-2.3,45-17.9,90.9-36.8,131.6-6.3,13.6-12.7,27.1-20.9,39.6a39.7,39.7,0,0,0-3,5.8c-7,14.5-13.9,29-22.7,42.6-3.9,6.1-7.6,12.4-11.3,18.7-10.2,17.4-25.2,30.4-38.7,44.8s-25.1,26.3-37.6,39.5c-6.1,6.4-13.1,11.9-18.9,18.5-10.3,11.6-22.3,21.3-33.3,32.1-7.1,7-12.9,15.5-18.8,23.8-14.6,20.2-23.7,43-33.8,65.3-6.8,14.9-11.7,30.4-18.1,45.4a398.4,398.4,0,0,1-17.5,36c-6.2,11.3-14.1,21.1-23,30.5-12.8,13.7-25.9,27.3-39.5,40.1s-28.6,26.2-43.2,38.9l-1.3,1.1C115.2,803,105,812.9,95,822.9c-14.6,14.5-30,28.3-45.8,41.6-19.5,16.4-38.5,33.4-55,53a13.8,13.8,0,0,1-2.6,2.2ZM814.9,1099.7c-18.2-90.3-29.2-183-18.5-274.5,1.9-16.4,4.5-32.8,7.9-48.9s7.6-32.4,12.6-48.3a456.9,456.9,0,0,1,17.5-46.5,366.3,366.3,0,0,1,18.5-37.1c6.9-12.1,14.9-23.1,23-34.3,16-22.4,32.3-44.5,49.1-66.3l1.4-1.8q25.2-32.4,51.4-63.8c33.9-40.6,72.3-76.9,108.3-115.5a517.7,517.7,0,0,0,49.4-62.1c7.7-11.4,14.2-23.7,21.2-35.5a681,681,0,0,0,46.3-94.8c13.5-34.2,27.7-67.6,43.8-100.8q23-47.2,49-93.1c3.3-5.7,8.1-14.6,15.2-15.9,8.9-1.6,19.5-.6,28.4.6.7,5.5-9.4,17-12.4,21.9L1312.6,7.1c-18.7,31.8-36.2,63.8-53.2,96.7s-34,63.9-49.3,96.7c-8.2,17.4-14.4,36.2-24.1,52.8-7.7,13.1-14.4,27-22.6,39.9a423.3,423.3,0,0,1-81.9,94.6,370.7,370.7,0,0,0-28.5,27.6c-5.9,6.4-11.9,12.8-18,19.1-15.7,16.3-32,31.9-48.4,47.4-9.4,8.9-17.4,18.9-25.2,29-11.8,15.1-24.3,29.6-36.9,44.1-6.1,7.1-12.6,13.8-18.4,21.2-14,17.9-28.5,36.5-40.9,55.7a341.6,341.6,0,0,0-23,43A363.6,363.6,0,0,0,825.3,721a435.6,435.6,0,0,0-11.1,48.1,473.1,473.1,0,0,0-5.8,49.1c-.6,8.5-.9,17-1.1,25.6-1.4,86.3,16.7,171.6,35.4,255.9H814.9ZM1468.1-38.3a10.2,10.2,0,0,1,1.8,1.3c-42.5,74.3-47.9,163.9-45.2,249.5,1.7,51,5.8,101.9,5.6,152.9-.1,23.3-1,46.9-3.4,70-4.3,39.5-14.1,78.3-22.5,117q-11.6,52.8-27.1,104.7c-11.5,38-24.9,76.6-41.9,113-23.7,50.6-57.9,95.4-90,141s-67,93.4-101.6,139.2l-25,32.9c-3.6,4.6-6.5,10.3-11.8,12-2.8.9-17.4-2.7-18.9-.6l104.7-145.4c43-59.8,88-120.1,122-185.5A1009.9,1009.9,0,0,0,1393,562.3c7.3-27.3,13.1-55.3,18-83.2s9.2-55.9,9.7-83.8.8-57.8-1-86.8-5.1-59.2-7-88.9c-2.3-37.5-5.8-74.9-4.6-112.3s5.9-74.7,17.1-110.4c.4-1.6,1.7-3.8,1.7-5.4,3.2-9.7,7.2-19.6,14.9-26.3S1460.3-43.3,1468.1-38.3ZM1927.7,478.5c-3.3,6.5-13.6,12.6-18.8,17.2l-23.6,21.4c-30.5,27.9-60.3,56.6-87.6,87.7-34.6,39.2-65.5,82.5-87,130.5-11.1,24.8-20.3,50.9-26.1,77.5s-5.9,55.3-6.7,83c-.4,12.2-.9,24.4-2.1,36.6a939.4,939.4,0,0,1-22.5,128.9c-2.7,11-5.9,22.4-13.5,30.7s-21.2,12.4-30.5,6c-2.2-1.5,14.7-46.7,16.3-51.8,5.8-17.8,11.1-35.9,15.7-54a877.6,877.6,0,0,0,20.6-110.5c2.8-22.9,2.6-46.1,6.2-68.9,4-25.9,12.8-50.7,24.3-74.2,12.5-25.2,28.6-48.2,43.9-71.7,30.2-46.5,66-90.5,101.6-132.9,11.5-13.8,23.3-27.4,35.2-40.9,14.3-16,31.7-42.9,55.3-45.3-2.1.5,1,26.7-.4,30ZM-7.8,574.1c1.2-2.1,3.9-3,6.1-4.3l11.5-6.7c15.2-9,30.1-18.7,43.8-30a197.2,197.2,0,0,0,46.3-55.4c13.4-23.9,20.1-51.4,28.7-77.2,6.6-20.1,12.9-40.4,20.6-60.1s15.2-42.5,25.1-62.8c8.8-18.4,17.7-36.8,25.9-55.5s18-37.5,26.1-56.5c8.7-20.8,21.4-39.1,33.5-57.7C274.6,85.2,290,62.8,307.4,42Q326,19.7,345.1-2.4c11.4-13.4,25.1-23.8,38.5-34.6.7-.6,1.3-1.4,2-2.1h26a6.5,6.5,0,0,1-4,7.4c-10.4,4.3-18.1,12.2-26.9,18.7-13.5,9.9-25.3,21.6-36.4,33.9S321.1,47,310.4,60.8s-22.3,29.8-32.7,45.3c-5.3,8-10.6,16.1-15.7,24.3s-10.5,15-15.2,22.9l-1.7,2.9c-7.2,13.1-14.7,26-21.3,39.5s-11.4,26.2-17.5,39-12.1,25.1-17.6,38a709.4,709.4,0,0,0-28.3,78.7c-.8,2.8-1.8,5.5-2.6,8.3-3.5,12.5-7.1,24.9-10.9,37.3s-7.6,23.3-10.7,35.2c-7.8,30.4-18.7,59.9-36.9,85.8a210.5,210.5,0,0,1-32.9,37,211.9,211.9,0,0,1-19.6,15.5L26.9,584.7l-4.7,3.2C15,592.7,7.9,598-.2,601.6c-2.6,1.1-5.3,1.9-8.2,1.2-.6-.2-.4-24.6,0-26.9A4.8,4.8,0,0,1-7.8,574.1ZM1928.4,909.7c-19.5.3-36.6,9.1-53.7,17-12.1,5.6-21.6,15.5-31,25.2-19.2,19.8-30.7,44.9-37.6,71.5-6.3,24.9-8.7,50.6-11.1,76.2a10,10,0,0,1-9.5,0c-7.2-4-3.3-9.9-3-16.1.5-10.6,1.4-21.2,2.6-31.8a496,496,0,0,1,9.9-56.8c3.9-16.4,13.6-33.1,23.3-46.7a167.9,167.9,0,0,1,39.1-38.9c15.8-11.2,33-18,50.8-25.2,6.3-2.6,13.3-2.9,20.2-2.4ZM-8.4,230.8c12-17.1,23.7-34.4,34.3-52.5,6.9-11.7,14.1-23.4,20.9-35.1,5.5-9.4,9.7-19.6,14.6-29.4q11-22.2,20.4-45c9-21.9,17.3-44.2,23.1-67.2,3.1-12.3,7.1-24.3,9.2-36.8.2-1.3.3-2.6.5-3.9h25c-.8,9.2-3.7,17.9-6.5,26.5-8.2,25-17,49.6-28.2,73.5s-24.3,48.3-37.8,71.8c-18.9,33-40.9,63.7-63.9,93.9-2.7,3.6-5,7.4-7.4,11.2-1.1,1.7-2.1,3.5-4.2,4Z"/>
</svg>
</div>
Change svg gradient to solid white with a transition?
I can't seem to get a transition on an SVG when I hover it.
The svg has a gradient inside ... but I want it to transition to white on hover.
Any ideas?
svg {
width: 20px;
height: 20px;
path {
transition: fill 0.4s ease;
&:hover {
fill: $white;
}
}
}
<svg id="Facebook_icon" data-name="Facebook icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8.713" height="16.779" viewBox="0 0 8.713 16.779">
<defs>
<linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#f7d077"/>
<stop offset="0.112" stop-color="#ffefaa"/>
<stop offset="0.269" stop-color="#ffdb74"/>
<stop offset="0.552" stop-color="#dba846"/>
<stop offset="0.808" stop-color="#dba846"/>
<stop offset="1" stop-color="#f4cd6f"/>
</linearGradient>
</defs>
<path id="Icon" d="M8.713,2.785H7.134c-1.238,0-1.479.588-1.479,1.451v1.9H8.61L8.225,9.125H5.655v7.653H2.576V9.125H0V6.142H2.576v-2.2A3.594,3.594,0,0,1,6.412,0a21.049,21.049,0,0,1,2.3.117Z" fill="url(#linear-gradient)"/>
</svg>
For CSSOM, a gradient is of type <image>, and you can't transition from an <image> to a solid <color>.
What you can do however is to transition from an <image> to an other <image>, so we should have been able to transition between two gradients, but as of this writing it seems no browser supports transitioning between svg gradients and none supports CSS gradients as fill value.
What does work however is to transition the stop-color values of the <stop> elements.
For this to happen only when the <path> is hovered, I did change the structure of your svg.
svg {
width: 20px;
height: 20px;
}
svg stop {
transition: stop-color 0.4s ease;
}
svg path:hover ~ defs stop {
stop-color: white;
}
<svg id="Facebook_icon" data-name="Facebook icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8.713" height="16.779" viewBox="0 0 8.713 16.779">
<path id="Icon" d="M8.713,2.785H7.134c-1.238,0-1.479.588-1.479,1.451v1.9H8.61L8.225,9.125H5.655v7.653H2.576V9.125H0V6.142H2.576v-2.2A3.594,3.594,0,0,1,6.412,0a21.049,21.049,0,0,1,2.3.117Z"
fill="url(#linear-gradient)"/>
<defs>
<linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#f7d077"/>
<stop offset="0.112" stop-color="#ffefaa"/>
<stop offset="0.269" stop-color="#ffdb74"/>
<stop offset="0.552" stop-color="#dba846"/>
<stop offset="0.808" stop-color="#dba846"/>
<stop offset="1" stop-color="#f4cd6f"/>
</linearGradient>
</defs>
</svg>
SVG - It is possible to add stroke-dasharray Gradient or transparent form one side
I have created an SVG animation in which I am allowing stroke-dasharray to move. Is it possible that I can add a gradient to the tail of stroke-dasharray and keep one side transparent as you can see in the example?
.svg-main {
width: 700px;
margin: 30px auto;
position: relative;
}
svg#svga {
position: absolute;
top: 0;
left: auto;
bottom: auto;
right: auto;
}
.st2{fill:none;stroke:#cccccc;stroke-width:6;}
.sd1{fill:none;stroke:#000000; stroke-width:6;stroke-linecap:round;}
.circ{fill:#000000; }
<div class="svg-main">
<svg id="svga" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="300px" height="200px" viewBox="0 0 685 310">
<g class="st2">
<path id="loop-normal" d="M343.6,156.5c11,15.9,104.6,147.2,181.9,147.6c0.1,0,0.8,0,1,0c82.1-0.3,148.6-67,148.6-149.2
c0-82.4-66.8-149.2-149.2-149.2c-77.2,0-170.8,131-182.2,147.5c-0.8,1.1-1.6,2.3-2.1,3.1c-10.6,15.3-104.8,147.8-182.4,147.8
C76.7,304.2,9.9,237.4,9.9,155S76.7,5.8,159.1,5.8c77.2,0,170.7,130.9,182.2,147.5C342.1,154.4,342.9,155.6,343.6,156.5z"/>
</g>
<use class="sd1" stroke-dasharray="200 1710" xlink:href="#loop-normal">
<animate attributeName="stroke-dashoffset"
from="200" to="-1710"
begin="0s" dur="10s"
repeatCount="indefinite"/>
</use>
<circle id="plug" class="circ" cx="0" cy="0" r="7"/>
<animateMotion
xlink:href="#plug"
dur="10s"
rotate="auto"
repeatCount="indefinite"
calcMode="linear"
keyTimes="0;1"
keyPoints="0;1">
<mpath xlink:href="#loop-normal"/>
</animateMotion>
</svg>
</div>
Please refer this
.svg-main {
width: 700px;
margin: 30px auto;
position: relative;
}
svg#svga {
position: absolute;
top: 0;
left: auto;
bottom: auto;
right: auto;
}
.st2{fill:none;stroke:#cccccc;stroke-width:6;}
.sd1{fill:none; stroke-width:6;stroke-linecap:round;}
.circ{fill:#000000; }
<div class="svg-main">
<svg id="svga" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="300px" height="200px" viewBox="0 0 685 310">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#000000" />
<stop offset="100%" stop-color="#ffffff" />
</linearGradient>
</defs>
<g class="st2" >
<path id="loop-normal" d="M343.6,156.5c11,15.9,104.6,147.2,181.9,147.6c0.1,0,0.8,0,1,0c82.1-0.3,148.6-67,148.6-149.2
c0-82.4-66.8-149.2-149.2-149.2c-77.2,0-170.8,131-182.2,147.5c-0.8,1.1-1.6,2.3-2.1,3.1c-10.6,15.3-104.8,147.8-182.4,147.8
C76.7,304.2,9.9,237.4,9.9,155S76.7,5.8,159.1,5.8c77.2,0,170.7,130.9,182.2,147.5C342.1,154.4,342.9,155.6,343.6,156.5z"/>
</g>
<use class="sd1" stroke="url(#gradient)" stroke-dasharray="200 1710" xlink:href="#loop-normal">
<animate attributeName="stroke-dashoffset"
from="200" to="-1710"
begin="0s" dur="10s"
repeatCount="indefinite"/>
</use>
<circle id="plug" class="circ" cx="0" cy="0" r="7"/>
<animateMotion
xlink:href="#plug"
dur="10s"
rotate="auto"
repeatCount="indefinite"
calcMode="linear"
keyTimes="0;1"
keyPoints="0;1">
<mpath xlink:href="#loop-normal"/>
</animateMotion>
</svg>
</div>
Linear Gradient SVG 3 colors increase the width of the middle color
I have a linear gradient with the below code
<svg width="120" height="240" >
<linearGradient id="dsp" x1="0" x2="0" y1="0" y2="1">
<stop class="stop1" offset="0%"/>
<stop class="stop2" offset="50%"/>
<stop class="stop3" offset="100%"/>
</linearGradient>
<style type="text/css">
.stop1 { stop-color: red; }
.stop2 { stop-color: yellow; stop-opacity: 0.7; }
.stop3 { stop-color: green; }
</style>
Now I want to increase the height of the middle color that is the yellow color.
I tried to increase the offset value of yellow color but instead of increasing the width the color band shifts downwards.
I want that the red and green should contain only 10% of the height of the SVG in below format
Red >> 15%
yellow >> 70%
green >> 15%
This is the color distribution expected.
just add two more stops in between the start/end stop and the middle...
EDIT based on squeamish ossifrages comment
.stop1 { stop-color: red; }
.stop2 { stop-color: yellow; stop-opacity: 0.7; }
.stop3 { stop-color: green; }
<svg width="120" height="240" >
<linearGradient id="dsp" x1="0" x2="0" y1="0" y2="1">
<stop class="stop1" offset="0%"/>
<stop class="stop2" offset="20%"/>
<stop class="stop2" offset="80%"/>
<stop class="stop3" offset="100%"/>
</linearGradient>
<rect x="0" y="0" width="240" height="120" fill="url(#dsp)"/>
</svg>