How to center svg as background? - html
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>
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>
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>
How to give the linear-gradient in svg as a background color for a div?
I have an svg like <svg> <linearGradient id="SVGID_124_" gradientUnits="userSpaceOnUse" x1="205.2935" y1="707.9475" x2="206.9863" y2="707.9475" gradientTransform="matrix(41.432 0 0 -41.432 -8114.9512 30139.9746)"> <stop offset="0" style="stop-color:#0071BC"/> <stop offset="3.780070e-02" style="stop-color:#0071BC"/> <stop offset="0.6151" style="stop-color:#00538B"/> <stop offset="0.784" style="stop-color:#004C86"/> <stop offset="0.9966" style="stop-color:#003B7C"/> <stop offset="1" style="stop-color:#003B7C"/> </linearGradient> </svg> I'm not sure how can I give this linear gradient as a background for a button. I tried the following, but I don't know how to give gradient transform in css. .btn { background: linear-gradient(to right, #0071BC 0%, #0071BC 37.80070%, #00538B 061.51%, #004C86 078.4%, #003B7C 099.66%, #003B7C 100%); color: white; border-radius: 8px; /* border: 1px solid #00538B; */ width: 95%; height: 25px; padding: 0px; } <button class="btn">button</button> Can somebody help? It is expected to look like this But i'm getting something like:
This is a close gradient in css. .btn { background: linear-gradient(to right, #0071bd 0%,#0171bb 39%,#016db5 41%,#005691 58%,#005691 59%,#01538b 61%,#014c86 78%,#003c7b 100%); border-radius: 5px; color: #fff; border: none; } <button class="btn">Closed</button> In generally, I'm using the gradient editor by colorzila to generate gradients from image / css / manually. May there are another tools. You can use the SVG itself, BUT: You have to make sure that the gradient's coordinates are right and feet to the element (aka .btn) which in this case, not. You need to convert it to base64. In the below snippet, for quick fixing, I created a script that read the svg in the html and convert it to base64 so you can tuning your gradient with it. Also, I changed a little the SVG syntax, Take a look: const svg = document.querySelector('svg').outerHTML; const base64 = window.btoa(svg); document.querySelector('.btn').style.backgroundImage = `url(data:image/svg+xml;base64,${base64})`; .btn { background: top repeat-x; background-size: cover; border-radius: 5px; color: #fff; border: none; } <button class="btn">Closed</button> <svg width="1000px" height="30000px" xmlns="http://www.w3.org/2000/svg" style="display: none"> <linearGradient id="SVGID_124_" gradientUnits="userSpaceOnUse" x1="205.2935" y1="707.9475" x2="206.9863" y2="707.9475" gradientTransform="matrix(41.432 0 0 -41.432 -8114.9512 30139.9746)"> <stop offset="0" style="stop-color:#0071BC"/> <stop offset="3.780070e-02" style="stop-color:#0071BC"/> <stop offset="0.6151" style="stop-color:#00538B"/> <stop offset="0.784" style="stop-color:#004C86"/> <stop offset="0.9966" style="stop-color:#003B7C"/> <stop offset="1" style="stop-color:#003B7C"/> </linearGradient> <g> <rect fill="url(#SVGID_124_)" stroke-width="0" x="0" y="0" width="100%" height="100%" /> </g> </svg>
SVG take up 400% of screensize
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>
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>