In Chromium it's not visible - but it is on pretty much everything else - but there is a what looks like a border around the SVG, well, you can see the top and bottom lines (top one is not clear here, but it's there).
This is the HTML that gets generated.
<div class="purple-gradient-background header-has-block">
<div class="container px-md-5 embed-block">[[omitted]]</div>
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg viewBox="0 0 1440 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="10.5864654%" y1="50%" x2="100%" y2="50%" id="linearGradient-1">
<stop stop-color="#F28F53" offset="0%"></stop>
<stop stop-color="#ED555F" offset="100%"></stop>
</linearGradient>
</defs>
<g id="svg_graphic-standalone-1-V4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M0,50.0114382 C309.731575,4.65760206 558.064908,4.66285455 745,50.0271956 C931.935092,95.3915367 1163.60176,95.3862842 1440,50.0114382 L1440,86 L0,86 L0,50.0114382 Z" id="BG" fill="#FAF7FB"></path>
<path d="M1440,50.3528061 C1163.60176,95.6971472 931.935092,95.6871472 745,50.3228061 C558.064908,4.95846499 309.731575,4.96846499 0,50.3528061 L0,50.3528061 L0,34.3528061 C309.601759,-10.7852514 557.935092,-11.2785847 745,32.8728061 C932.064908,77.0241969 1163.73157,77.5175302 1440,34.3528061 Z M1440,-1.52766688e-12 L0,-1.52766688e-12 L0,-1.64719392 L1440,-1.64719392 L1440,-1.52766688e-12 Z" id="Combined-Shape" fill="url(#linearGradient-1)"></path>
</g>
</svg>
</div>
The enclosing <div> goes around other items as well so cannot be causing the line.
I have tried removing the stroke information from the g element, and setting the width to zero. It had no effect.
Examination of the CSS assigned to the SVG shows there is no border, margin or padding:
box-sizing: border-box
display: inline
float: none
line-height: 24px
position: static
z-index: auto
Related
I'm trying to build a website where I need to overlap two images for the background (one is JPG and the other one is SVG file). But I am unable to overlay both of them as my SVG image has some extra white part in the start page. I want the part from where the gray starts to the bottom. But I am unable to do that.
Here is the SVG code and image : https://www.svgviewer.dev/s/CnqCU38Y
I've tried to do the following with my CSS code, but have failed to get the desired results.
.main-page {
width: 100%;
height: 100vh;
background-image: url('assets/Main-page/bg-cropped.svg'), url('assets/Main-page/1079171177-preview_PosterImage.png');
background-repeat: no-repeat;
}
Here are the images : https://imgur.com/a/oEkMeU3
Can anyone please help me out with this one?
May be transform="translate(0 0):
<svg viewBox="0 0 1920 1134.399" height="1134.399" width="1920" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient gradientUnits="objectBoundingBox" y2="0.664" x2="0.969" y1="0.176" id="linear-gradient">
<stop offset="0"></stop>
<stop stop-opacity="0" offset="1"></stop>
</linearGradient>
<clipPath id="clip-path">
<path fill="url(#linear-gradient)" d="M0,0H1920V769.66S1440.573,942.4,960.4,942.4,0,769.66,0,769.66Z" id="bg"></path>
</clipPath>
</defs>
<g transform="translate(0 0)" data-name="bg" id="bg-2">
<path fill="url(#linear-gradient)" transform="translate(0 0)" d="M0,0H1920V769.66S1440.573,942.4,960.4,942.4,0,769.66,0,769.66Z" data-name="bg" id="bg-3"></path>
</g>
</svg>
Im trying to make sure the height and width of an SVG divider is responsive but also clip an image into one of the layers to get this effect:
HERE
The issue I'm having right now since the only way to make this responsive both vertically and horizontally with 100vh and 100vw is the image squishing and skewing. Is there a way to preserve the aspect ratio of the image while retaining its responsiveness? Am I missing something basic here?
A link to my current attempt:
https://codepen.io/Tay8472/pen/mdLpOqw
Code snippet below:
<svg id="test_clip" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1069" preserveAspectRatio="none">
<clipPath id="mask_cc_1">
<path d="M0,1025.25c246.56-43.45,560.46-69.79,891-10.97,34.54,6.15,49.46,9.7,83.74,15.91,219.17,39.72,525.11,60.44,945.26,4.92V0H0V1025.25Z"/>
</clipPath>
<image id="test_cc" class="image__svg-image" width="110%" height="110%" clip-path="url(#mask_cc_1)" x="-35%" preserveAspectRatio="xMinYMin" xlink:href="https://www.cupcakebowls.com/wp-content/uploads/2022/09/overlay_cupcake_v1.svg" />
</svg>
<!-- <svg id="test_clip_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 506" >
</svg> -->
<svg id="home_gradient_backdrop" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1069" preserveAspectRatio="none">
<defs>
<style>.home_gradient_overlay{fill:url(#radial-gradient);}</style>
<radialGradient id="radial-gradient" cx="1303.67" cy="727.5" fx="1303.67" fy="727.5" r="1555.2" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f5428d"/>
<stop offset=".3" stop-color="#da40a1"/>
<stop offset=".95" stop-color="#953dd5"/>
<stop offset="1" stop-color="#903dda"/>
</radialGradient>
</defs>
<path class="home_gradient_overlay" d="M0,1025.25c246.56-43.45,560.46-69.79,891-10.97,34.54,6.15,49.46,9.7,83.74,15.91,219.17,39.72,525.11,60.44,945.26,4.92V0H0V1025.25Z"/>
</svg>
<svg id="home_pink_secondary_backdrop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" preserveAspectRatio="none">
<defs>
<style>.home_pink_backdrop{fill:#ffaed0;}</style>
</defs>
<path class="home_pink_backdrop" d="M0,1080c227-61.03,475.1-86,816-67.91,146.98,7.8,214.97,30.58,381,43.87,299.08,23.93,552.7,2.08,723-20.84V0H0V1080Z"/>
</svg>
I'm looking for a way to produce an inner radial shadow hover any image with css and svg (or other ?).
Here is an example of what i would like to do (for header and footer parts)
Have you got any suggestions ? I would like a way the most cross browser as possible.
Thank you !
Do you mean like this?
body{background:black;}
svg{height:100vh; display:block; margin:0 auto;}
<svg viewBox="0 0 300 300">
<defs>
<radialGradient id="rg" cx=".5" cy=".5" r=".5">
<stop offset="30%" stop-color="white"></stop>
<stop offset="100%" stop-color="black"></stop>
</radialGradient>
<mask id="mascara">
<circle cx="150" cy="150" r="100" fill="url(#rg)"></circle>
</mask>
</defs>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" height="240" width="250" style="mask: url(#mascara)"></image>
</svg>
You may need to detect the position of your mouse and use it as the center for the mask.
I have a situation where I have a SVG graphic whose width is a percentage of the viewport, and whose height is fixed. Inside the graphic I have an SVG image element which I want to always fill its immediate container without distorting, much as would be achieved by using CSS background-size: fill.
How can I achieve this using my SVG?
Here's a minimal setup of the problem (and a codepen):
<svg width=100% height=300>
<rect width=100% height=300 stroke="blue" stroke-width=30 fill="transparent" />
<image xlink:href="//unsplash.it/500/300" width=100% height=100% />
</svg>
In the above snippet, I need the image to fill the entire container without distorting (in this instance, the container being the root SVG), regardless of viewport width.
I can't switch to regular HTML because the graphic I'm working on has an SVG clipping mask applied to the image element.
I found this question, which seems close to what I'm asking, but I don't think answers my question:
How can I make my embedded svg image stetch to fill a container?
In hopes of avoiding the XY problem, here's the actual SVG graphic I'm working on. And the (fixed-height, variable-width) result I'm trying to achieve:
Svg scaling with image
If you add a viewbox to the svg the svg knows how to scale.
Now adding the same viewBox ratio as the svg makes it so the svg will always have the same scale as the image.
You can always scale the image to its inside the viewBox.
Then it will always scale with the svg.
svg {
border: 2px solid black;
}
<svg width="100%" height="100%" viewBox="0 0 500 300">
<image width="500" height="300" xlink:href="//unsplash.it/500/300"/>
</svg>
To keep the height of the image unchanged, set the fixed value of the viewport height and preserveAspectRatio = "none"
<svg width="100%" height="300" viewBox="0 0 500 300" preserveAspectRatio = "none">
<image width="500" height="300" xlink:href="//unsplash.it/500/300"/>
</svg>
UPD
The proportions of the picture will not change, the height remains fixed when using preserveAspectRatio="xMinYMin slice"
<svg width="100%" height="300" viewBox="0 0 500 300" preserveAspectRatio="xMinYMin slice">
<image width="100%" height="300" xlink:href="//unsplash.it/500/300" />
</svg>
UPD2
I looked your codepen Like the idea. I've finished it with your permission. Modified some parameters
<svg width="100%" height="400" preserveAspectRatio="xMinYMin slice">
<defs>
<mask id="clipping">
<rect width="100%" height="400" fill="white"/>
<ellipse cx="50%" cy="120%" rx="75%" ry="37%"/>
</mask>
<linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="white"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
</defs>
<rect width="100%" height="400" fill="orange" mask="url(#clipping)" transform="translate(-20 12) rotate(-2.5)" />
<image xlink:href="https://unsplash.it/1000/500" width="100%" height="400" mask="url(#clipping)" transform="translate(0 -10)" />
<rect width="100%" height="400" fill="url(#Gradient1)" mask="url(#clipping)" transform="translate(0 -10)" opacity="0.25" />
</svg>
I ended up using two SVGs and an image which used a clipping mask defined in the first SVG to clip it down. I was able to make the SVGs scale by only defining a viewbox, not a width and height. I opted to use a fixed aspect ratio instead of a fixed height, percentage width, as I had originally planned.
body > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
img {
clip-path: url(#clipper);
}
<svg viewBox="0 0 1000 500">
<defs>
<symbol id="arch" viewBox="0 0 1000 400">
<path d="M0 0 H 1000 V 400 Q 500 300, 0 400" />
</symbol>
<clipPath id="clipper" clipPathUnits="objectBoundingBox">
<path d="M0 0 H 1 V 1 Q .5 .75, 0 1" />
</clipPath>
<linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#87AFBF"/>
<stop offset="100%" stop-color="#002855"/>
</linearGradient>
</defs>
<use href="#arch" width="100%" y="-40" fill="#F9B000" transform="translate(-20 12) rotate(-2.5)" />
</svg>
<img src="//unsplash.it/1000/400" alt="">
<svg viewBox="0 0 1000 500">
<use href="#arch" y="-50" fill="url(#Gradient1)" opacity="0.75" />
</svg>
CodePen
Been playing around with SVGS today and I'm wondering how I would make what I've done fully responsive. I've made this JS fiddle below to show everyone.
<div id="cont" data-pct="25">
<svg id="svg" width="200" height="200" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad1" cx="80%" cy="60%" r="70%" fx="60%" fy="40%">
<stop offset="0%" style="stop-color:rgb(33,204,185);" />
<stop offset="100%" style="stop-color:rgb(31,98,205);stop-opacity:1" />
</radialGradient>
</defs>
<circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
<circle id="bar" r="90" cx="100" cy="100" stroke="url(#grad1)" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
</svg>
</div>
https://jsfiddle.net/x152qo95/1/
At the moment it has fixed widths and heights.
I can make it work without the width being 100% but can't get it aligned properly with the height.
Looking forward to learning solutions to this.
Your viewBox was too small. This should work:
<svg id="svg" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">