I want to hide the clipPath element so it doesn't show empty white space in the browser, but I still want to be able to use it from other svgs, like the image.
If I put width 0 and height 0 on it then IE won't show the image either.
If I put display:none the image doesn't show up in any browser.
<svg height="0" width="0" viewBox="0 0 400 400">
<defs>
<clipPath id="svgPath">
<circle fill="#FFFFFF" cx="50%" cy="50%" r="200" />
</clipPath>
</defs>
</svg>
<svg width="400" height="400" viewBox="0 0 400 400">
<image xlink:href="https://farm2.staticflickr.com/1530/25831337243_d27d32ceb5_z_d.jpg" width="100%" height="100%" preserveAspectRatio="xMinYMin slice" clip-path="url(#svgPath)" />
</svg>
Any ideas?
Put it in the same SVG as the image and there's nothing to hide.
<svg width="400" height="400" viewBox="0 0 400 400">
<defs>
<clipPath id="svgPath">
<circle fill="#FFFFFF" cx="50%" cy="50%" r="200" />
</clipPath>
</defs>
<image xlink:href="https://farm2.staticflickr.com/1530/25831337243_d27d32ceb5_z_d.jpg" width="100%" height="100%" preserveAspectRatio="xMinYMin slice" clip-path="url(#svgPath)" />
</svg>
Related
This question already has answers here:
How to resize a svg
(2 answers)
Closed 17 hours ago.
I have the below SVG which I am using as a mask to overlay on an image, I am trying to make the circle responsive, so it shrinks on mobile devices but haven't had any luck using view box etc as it removes the mask, I am also trying to position the shadow to the bottom right of the circle, but again I am having trouble making it responsive.
Any help would be greatly appreciated.
svg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1000" preserveAspectRatio="xMidYMin slice">
<defs>
<mask id="mask" x="0" y="0">
<rect x="0" y="0" height="100%" width="100%" fill="#fff"/>
<circle cx="50%" cy="50%" r="250" />
</mask>
<pattern id="img" patternUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
<image xlink:href="https://images.unsplash.com/photo-1507181179506-598491b53db4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=299b6fae13eb39086f5bb28029c61760&auto=format&fit=crop&w=1778&q=80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
</pattern>
</defs>
<path id="Shadow" d="M462.231,0c19.593,38.355,29.045,88.448,36.926,138.3,9.125,75.59-104.323,237.333-194.755,250.24C246.323,389.921,51.569,371.964,0,313.148c46.559,91.147,141.283,153.59,250.655,153.59,155.395,0,281.365-125.97,281.365-281.365A280.22,280.22,0,0,0,462.231,0" opacity="0.2" />
<rect width="100%" height="100%" mask="url(#mask)" fill-opacity="1" fill="url(#img)" />
</svg>
Putting the path inside a g container allowed me to scale the shadow relative to the mask, hope this helps someone in the future.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" preserveAspectRatio="xMidYMid slice">
<defs>
<mask id="mask" x="0" y="0">
<rect x="0" y="0" height="100%" width="100%" fill="#fff"/>
<circle cx="50%" cy="50%" r="16.5%" />
</mask>
<pattern id="img" patternUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
<image xlink:href="https://images.unsplash.com/photo-1507181179506-598491b53db4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=299b6fae13eb39086f5bb28029c61760&auto=format&fit=crop&w=1778&q=80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
</pattern>
</defs>
<g>
<path id="Shadow" d="m 462.231 0 c 19.593 38.355 29.045 88.448 36.926 138.3 c 9.125 75.59 -104.323 237.333 -194.755 250.24 c -58.079 1.381 -252.833 -16.576 -304.402 -75.392 c 46.559 91.147 141.283 153.59 250.655 153.59 c 155.395 0 281.365 -125.97 281.365 -281.365 a 280.22 280.22 0 0 0 -69.789 -185.373" opacity="0.2" style="transform: scale(0.3) translate(579px, 650px);" />
<rect width="100%" height="100%" mask="url(#mask)" fill-opacity="1" fill="url(#img)" />
</g>
</svg>
So basically I have a triangular shape and I want to mask it in an image/gif.
<svg width="209" height="143" viewBox="0 0 209 143" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" fill="black"/>
</svg>
<div class="clipSvg2">
<svg viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask11">
<!-- <svg width="209" height="143" viewBox="0 0 209 143" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" fill="black"/>
</svg>
-->
</mask>
</defs>
//Here add some mask=url(#mask11)
<image
width="100%" height="100%" xlink:href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"></image>
</svg>
</div>
As you see I'm trying to mask the mask11 in my image but I can't do that..I've search a lot here and its not really working I don't know how or what to do about it can anyone help me? Thanks a lot.
I'm not sure what it should look like, but here are two examples. The first uses a clip-path. With the clip-rule="evenodd" it is only the "frame" that shows.
The second is a mask. In the mask the path has a white fill – that is what makes the image show.
In both cases I made the viewBox the same aspect ratio as the image to make the image take up the entire space of the SVG.
<svg width="300" viewBox="0 0 284 178" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="cp1">
<path clip-rule="evenodd"
d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" />
</clipPath>
</defs>
<image width="100%" height="100%"
href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"
clip-path="url(#cp1)"/>
</svg>
<svg width="300" viewBox="0 0 284 178" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="m1">
<path d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z"
fill="white"/>
</mask>
</defs>
<image width="100%" height="100%"
href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"
mask="url(#m1)"/>
</svg>
https://jsfiddle.net/4n7j5a1t/
I'm using a svg shape divider but how I can change the background color to a background image in the fill CSS property ?
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z" class="shape-fill"></path>
</svg>
This is what I have tried so far but it does not keep the svg shape in place (wave):
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<defs>
<pattern id="imgpattern" x="0" y="0" width="1" height="1">
<image width="120" height="250"
xlink:href="https://example.com/slider-bg.png"/>
</pattern>
</defs>
<path d="M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z" class="shape-fill" fill="url(#imgpattern)"></path>
</svg>
Thanks.
EDIT
You have to define the image and then add it as a fill.
You can read more about this here
I'm not sure if this is what you wanted but I hope it helps. If not try to explain a little more and I might be able to help you.
Cheers!
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="600" height="450">
<image xlink:href="https://image.api.playstation.com/vulcan/img/rnd/202011/0714/vuF88yWPSnDfmFJVTyNJpVwW.png" x="0" y="0"
width="600" height="450" /><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php-->
</pattern>
</defs>
<path fill="url(#img1")" d="M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z" class="shape-fill"></path>
</svg>
I'd like stretch an image into a SVG but it seems not working as expected.
I used the preserveAspectRatio for the SVG but it doesn't work and the image get a padding left and right.
My code :
<svg class="mapSvg" preserveAspectRatio="none" width="1292px" height="649px" viewBox="0 0 1292 649">
<image xlink:href="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/befbcde0-9b36-11e6-95b9-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg" height="100%" width="100%" x="0" y="0"></image>
<polyline fill="red" stroke="black" points="461.909521484375,221.9047607421875 471.43330078125,220.9523681640625 475.24287109375,212.38095703125 472.385693359375,167.61904296875 477.147607421875,153.3333251953125 462.8619140625,153.3333251953125 460.95712890625,219.047607421875 461.909521484375,221.9047607421875" data-id="0">
</svg>
Main issue : my image do not fill the SVG.
Move preserveAspectRatio="none" to the image tag.
<svg class="mapSvg" width="1292px" height="649px" viewBox="0 0 1292 649">
<image preserveAspectRatio="none" xlink:href="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/befbcde0-9b36-11e6-95b9-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg" height="100%" width="100%" x="0" y="0"></image>
<polyline fill="red" stroke="black" points="461.909521484375,221.9047607421875 471.43330078125,220.9523681640625 475.24287109375,212.38095703125 472.385693359375,167.61904296875 477.147607421875,153.3333251953125 462.8619140625,153.3333251953125 460.95712890625,219.047607421875 461.909521484375,221.9047607421875" data-id="0">
</svg>
I have created an svg heart with a background image inside.
I'm trying to make the svg larger, but changing the width and height on both the pattern and the svg itself does not work.
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" height="315" width="345" >
<!-- START SVG RULES -->
<defs>
<!-- DEFINE IMAGE INSIDE PATTERN -->
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" x="0" y="0" width="100" height="100" /></pattern>
<!-- SVG SHAPE CREATION -->
<g id="heart">
<path
d="M0 200 v-200 h200
a100,100 90 0,1 0,200
a100,100 90 0,1 -200,0
z" />
</g>
</defs>
<use xlink:href="#heart" class="outline" fill="url(#img1)" />
</svg>
For a resizable SVG use viewBox="0 0 315 345"instead height="315" width="345"
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" viewBox="0 0 315 345" >
<!-- START SVG RULES -->
<defs>
<!-- DEFINE IMAGE INSIDE PATTERN -->
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" x="0" y="0" width="100" height="100" /></pattern>
<!-- SVG SHAPE CREATION -->
<g id="heart">
<path
d="M0 200 v-200 h200
a100,100 90 0,1 0,200
a100,100 90 0,1 -200,0
z" />
</g>
</defs>
<use xlink:href="#heart" class="outline" fill="url(#img1)" />
</svg>
Click the resize button to see if this is what you need.
https://jsfiddle.net/gbxquc05/29/
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 400 400">
Drawing paths in SVG is unfortunately limitted to absolute units. This is a workaround using viewBox to create coordinate system that transforms to percentage.