Image Masking with SVG Shapen

Image Masking with SVG Shapen - css

I am trying so many codes but I can not mask it with my SVG shape I am not sure is that my shape problem or code problem
HTML
<div class="banner">
<div class="imagearea">
<svg>
<defs>
<mask id="maskHome" maskUnits="objectBoundingBox">
<path id="Path_475" data-name="Path 475" d="M1172.467,599.6l17.558-22.785c16.862-22.349,22.338-31.236,22.556-47.2.228-22.556-18.232-39.429-42.623-39.429a50.965,50.965,0,0,0-13.2,1.929,288.486,288.486,0,0,0,44.137-153.3c0-160.258-130.089-290.337-290.347-290.337A289.868,289.868,0,0,0,620.188,338.818c0,.228.031.436.031.653-46.315,5.61-69.11,48.721-87.663,83.857-18.076,34.223-30.417,55.006-49.354,55.006s-31.288-20.783-49.364-55.006c-19.87-37.646-44.615-84.5-97.961-84.5s-78.06,46.854-97.92,84.51c-18.055,34.223-30.386,55-49.3,55s-31.267-20.772-49.323-55c-19.881-37.656-44.6-84.51-97.951-84.51v55.8c18.927,0,31.268,20.772,49.323,55,19.88,37.645,44.615,84.51,97.951,84.51s78.06-46.865,97.92-84.51c18.055-34.223,30.386-55,49.3-55,18.937,0,31.278,20.783,49.354,55.006,19.88,37.645,44.614,84.5,97.971,84.5s78.091-46.855,97.961-84.5c16.5-31.226,28.27-51.065,44.584-54.332,26.165,133.242,143.042,233.879,284.8,233.879,84.946,0,161.17-36.785,214.289-95.005,0,.083-.01.145-.01.228h32.366c-1.814-9.116,3.879-14.591,11.18-14.591,4.553,0,12.071,1.825,12.071,12.538,0,5.247-1.13,8.431-14.125,25.989l-52.662,70.666h100.761V599.6ZM910.546,487.782c-85.786,0-149.9-63.178-149.9-148.964s64.111-148.933,149.9-148.933c84.832,0,148.943,63.157,148.943,148.933S995.378,487.782,910.546,487.782Z" transform="translate(-41.382 -48.481)" fill="#000"/>
</mask>
</defs>
</svg>
<img class="maskHome" src="https://cdn.pixabay.com/photo/2017/04/24/13/37/architecture-2256489_1280.jpg"
width="100%" height="100%" />
</div>
</div>
CSS
.maskHome {
mask: url("#maskHome");
height: 200px;
width: 200px;
}
Codepan https://codepen.io/pagol/pen/PomGZdb

Related

I can't frame this image inside an SVG

I want to wrap this
inside
to achive a result similar to
(source: i.ibb.co)
it is to say, the t-shirt should be cropped inside the cloud, following its path.
I tried to use a CSS border mask, but I was not successful:
.wrapper {
background-image:url('https://svgshare.com/i/T9J.svg');
background-repeat:no-repeat;
background-size:200px;
background-position:50% 50%;
width:200px;
}
.svg-border-mask {
-webkit-mask-box-image: url('https://svgshare.com/i/T9J.svg');
mask-border: url('https://svgshare.com/i/T9J.svg');
}
<div class="wrapper">
<img src="https://i.stack.imgur.com/2GKtb.png" alt="" class="svg-border-mask" />
</div>
How can I do it? I read about the clip-path way too, but I don't know how to draw this SVG path...

Use mask not mask-border and apply the same properties as the background to have a perfect matching:
.wrapper {
background-image:url('https://i.ibb.co/KjmqTs2/cloud.png');
background-repeat:no-repeat;
background-size:200px;
background-position:50% 50%;
-webkit-mask: url('https://i.ibb.co/KjmqTs2/cloud.png');
-webkit-mask-repeat:no-repeat;
-webkit-mask-size:200px;
-webkit-mask-position:50% 50%;
width:200px;
}
img {
max-width:100%;
}
<div class="wrapper">
<img src="https://i.stack.imgur.com/2GKtb.png" alt="" class="svg-border-mask" />
</div>
You can also simplify like below:
img {
--m:url('https://i.ibb.co/KjmqTs2/cloud.png') center/contain no-repeat;
background:var(--m);
-webkit-mask: var(--m);
width:200px;
padding:0 20px; /* some padding to control the shape */
}
<img src="https://i.stack.imgur.com/2GKtb.png" >
<img src="https://i.stack.imgur.com/2GKtb.png" style="width:100px;padding:0">
<img src="https://i.stack.imgur.com/2GKtb.png" style="width:100px;padding:0 30px">

A good reference is https://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image but as I was new to this too I have seen how it works by taking the cloud SVG image given in the question and combining it with the given tshirt image.
Look at the code in this snippet which defines an img and uses it instead of the fill color on the first path in the given SVG. I've put it all inline so it's possible to see what is going on.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 342.33 210.05">
<defs>
<style>.cls-1{fill:#00ffff;}.cls-2{fill:#d1d1d1;}</style>
<pattern id="img1" patternUnits="userSpaceOnUse" width="342.33" height="210.05">
<image href="https://cdn.shopify.com/s/files/1/0520/4063/0437/products/img9_be295193-87ac-4d81-a55d-2353cbf5621d_250x.png" x="0" y="0" width="342.33" height="210.05" />
</pattern></defs>
<g id="Capa_2" data-name="Capa 2">
<g id="Capa_1-2" data-name="Capa 1">
<g id="Fill_24" data-name="Fill 24">
<path d="M337.32,112.06A56.17,56.17,0,0,1,320.21,152a50.61,50.61,0,0,1-58.44,9l-3-1.52-.6,3.3c-4.05,22.46-22.82,38.38-44.58,37.92-16.41-.37-31.29-10.12-38.84-25.47l-2.86-5.81-1.79,6.23C165,193.48,146.93,206.38,129,204.93c-19.83-1.65-37.72-17.08-43.53-37.59l-1.39-4.5-3,3.67a42.48,42.48,0,0,1-23.59,14.76A41.38,41.38,0,0,1,25.05,175a45.35,45.35,0,0,1-19-28.71A46.93,46.93,0,0,1,11.89,112C21.13,96.84,38,88.9,54.89,91.73l4.63.78-1.94-4.28A40,40,0,0,1,59.7,51,35.88,35.88,0,0,1,82.8,34.33a34.66,34.66,0,0,1,27,5.27,37.65,37.65,0,0,1,13.26,15.85l3.18,7.14,1.55-7.66C133.35,27.57,157.66,6.12,184.33,5c30.07-1.19,59.39,18.76,71.34,48.54.78,1.82,1.43,3.65,2.16,5.84l.92,2.76,2.59-1.33a50.69,50.69,0,0,1,24.07-5.54C314.53,56,337.82,81.42,337.32,112.06Z" fill="url(#img1)" />
<path class="cls-2" d="M285.52,50.32a55.83,55.83,0,0,0-23.87,4.84c-.42-1.17-.87-2.35-1.36-3.5C247.58,20,216.27-1.21,184.13.05c-26.82,1.08-51.42,21.11-59.63,47.59a42.77,42.77,0,0,0-11.91-12.18,39.6,39.6,0,0,0-30.85-6,40.87,40.87,0,0,0-26.31,19,45.08,45.08,0,0,0-4,37.9C34,85,17.15,93.76,7.62,109.36a52,52,0,0,0-6.47,38,50.21,50.21,0,0,0,21.08,31.82,46.34,46.34,0,0,0,36.46,7A47.49,47.49,0,0,0,82.1,173c7.49,20.28,26.05,35.21,46.53,36.92,1.09.08,2.18.13,3.27.13,17.51,0,34-11.27,41.12-27.78a49.24,49.24,0,0,0,40.47,23.34c23.2.57,43.32-15.65,48.94-38.85a56.69,56.69,0,0,0,21.07,4.67,55.84,55.84,0,0,0,40.18-15.88,61.15,61.15,0,0,0,18.64-43.41c0-.35,0-.69,0-1C342.33,78.18,317.05,51,285.52,50.32Zm-1.9,116.11a51.31,51.31,0,0,1-21.85-5.51l-3-1.52-.6,3.3c-4.05,22.46-22.82,38.38-44.58,37.92-16.41-.37-31.29-10.12-38.84-25.47l-2.86-5.81-1.79,6.23C165,193.48,146.93,206.38,129,204.93c-19.83-1.65-37.72-17.08-43.53-37.59l-1.39-4.5-3,3.67a42.48,42.48,0,0,1-23.59,14.76A41.38,41.38,0,0,1,25.05,175a45.35,45.35,0,0,1-19-28.71A46.93,46.93,0,0,1,11.89,112C21.13,96.84,38,88.9,54.89,91.73l4.63.78-1.94-4.28A40,40,0,0,1,59.7,51,35.88,35.88,0,0,1,82.8,34.33a34.66,34.66,0,0,1,27,5.27,37.65,37.65,0,0,1,13.26,15.85l3.18,7.14,1.55-7.66C133.35,27.57,157.66,6.12,184.33,5c30.07-1.19,59.39,18.76,71.34,48.54.78,1.82,1.43,3.65,2.16,5.84l.92,2.76,2.59-1.33a50.69,50.69,0,0,1,24.07-5.54c29.12.65,52.41,26.11,51.91,56.75A56.17,56.17,0,0,1,320.21,152,51,51,0,0,1,283.62,166.43Z"/>
</g>
</g>
</g>
</svg>

How can i add backgroung image in the following svg?

From this website
https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections
i generated the following svg
<div style="height: 100%; overflow: hidden;" class='parent' ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M213.19,0.00 C152.69,70.06 270.03,70.06 202.98,150.00 L500.00,150.00 L500.00,0.00 Z" style="stroke: none; fill: #08f;"></path></svg></div>
the problem is that when i try to add background image for example here on the parent class
.parent {
background-image: url('../../../assets/images/calendar.png');
}
then the image is hidden behind the blue color of the svg.How can i 'insert' this image to be on the blue svg color image ?

As name says - it's "background-image" so it always is on the background of selected element.
I suggest that you should make an <img> tag in parent element and style it so that .parent would have attribute position: relative and img should have position: absolute.
Also remember to set top and left/right position for <img>.

it's Answered here https://stackoverflow.com/a/3798797/9017484
You can do it by making the background into a pattern:
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image href="wall.jpg" x="0" y="0" width="100" height="100" />
</pattern>
</defs>
your code should be something like this:
<div style="height: 100%; overflow: hidden;" class='parent' >
<svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image href="ImageFile.jpg" x="0" y="0" width="100" height="100" />
</pattern>
</defs>
<path d="M213.19,0.00 C152.69,70.06 270.03,70.06 202.98,150.00 L500.00,150.00 L500.00,0.00 Z" style="stroke: none; fill: url(#img1);"></path>
</svg>
</div>

change the opacity level so the color is lower opacity. something like this perhaps.
background {
backgroundColor:blue,
opacity: 0.5;
}

How to position my svg image to the center of browser

I generated a simple svg image and loaded it to Chrome. Meant to position it to the center of browser(even when the browser resizing), but so far have failed on this.
Have referred to some articles about viewport/viewbox setting, and some Q&As on this site(https://stackoverflow.com/questions/8639383/how-do-i-center-an-svg-in-a-div;https://stackoverflow.com/questions/13373169/align-svg-to-center-of-screen), but haven't got it done. Maybe I missed something, since I am very new to this.
Here is the full code for this svg image:
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
width="100%"
height="100%"
viewBox="0 -700 1080 1920"
preserveAspectRatio="xMidYMid meet"
version="1.1"
id="mysvg"
>
<g
id="group" >
<circle
r="500"
style="fill:#ffb721;fill-opacity:1"
cy="0"
cx="0"
id="path" />
<circle
style="fill:#f71c17;fill-opacity:1;"
id="path2"
cx="0"
cy="0"
r="250" />
</g>
</svg>
I expect this image could stay at the center of the browser, even during browser resizing.

I think this is what you want?
The SVG will be position in the center even the browser resized and scroll
ON GLOBAL CSS
CSS:
#container {
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
}
INSIDE SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 439.29 439.29" width="100%" height="100%">
<g id="group">
<circle cx="219.64" cy="219.64" r="219.64" style="fill: #ffb721" id="path"/>
<circle cx="219.64" cy="219.64" r="108.32" style="fill: #f71c17" id="path2"/>
</g>
</svg>

Your SVG needs a little modification to center it in the ViewBox.
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 300px;
height: 300px;
background-color: rgba(red, .3);
}
<div class="container">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
width="100%"
height="100%"
viewBox="-540 -960 1080 1920"
preserveAspectRatio="xMidYMid meet"
version="1.1"
id="mysvg"
>
<g
id="group" >
<circle
r="500"
style="fill:#ffb721;fill-opacity:1"
cy="0"
cx="0"
id="path" />
<circle
style="fill:#f71c17;fill-opacity:1;"
id="path2"
cx="0"
cy="0"
r="250" />
</g>
</svg>
</div>

Apply different CSS to <use> tag from one symbol svg?

I defined an svg icon like this
<svg style="display: none">
<symbol id="icon-check-mark-3" viewBox="0 0 200 200">
<title>check-mark-3</title>
<path fill="#fcc083" class="path1 fill-color2" d="M99.875 11.584c-48.968 0-88.666 39.697-88.666 88.666s39.698 88.666 88.666 88.666 88.666-39.698 88.666-88.666c0-48.969-39.698-88.666-88.666-88.666zM150.97 69.963l-48.493 67.173c-4.055 5.62-12.535 5.618-16.59 0l-25.396-35.181c-3.307-4.582-2.273-10.978 2.307-14.284 4.584-3.306 10.977-2.272 14.283 2.307l17.101 23.69 40.197-55.68c3.305-4.582 9.699-5.615 14.282-2.306 4.582 3.306 5.616 9.701 2.308 14.281z"></path>
</symbol>
</svg>
<p id="first">my first image
<use xlink:href="#icon-check-mark-3"></use>
</svg>
</p>
<p id="second">my second image
<use xlink:href="#icon-check-mark-3"></use>
</svg>
</p>
I need to color the #first icon in red.
I have spent nearly 2 hours to find the way to do this but I can't.

First, you are missing the <svg> opening tag in your paragraphs. Second, you need to remove the fill property on the symbol, then you will be able to specify the color of each svg with CSS like this :
#first svg {
fill: red;
}
#second svg {
fill: #fcc083;
}
<svg style="display: none">
<symbol id="icon-check-mark-3" viewBox="0 0 200 200">
<title>check-mark-3</title>
<path class="path1 fill-color2" d="M99.875 11.584c-48.968 0-88.666 39.697-88.666 88.666s39.698 88.666 88.666 88.666 88.666-39.698 88.666-88.666c0-48.969-39.698-88.666-88.666-88.666zM150.97 69.963l-48.493 67.173c-4.055 5.62-12.535 5.618-16.59 0l-25.396-35.181c-3.307-4.582-2.273-10.978 2.307-14.284 4.584-3.306 10.977-2.272 14.283 2.307l17.101 23.69 40.197-55.68c3.305-4.582 9.699-5.615 14.282-2.306 4.582 3.306 5.616 9.701 2.308 14.281z"></path>
</symbol>
</svg>
<p id="first">my first image
<svg>
<use xlink:href="#icon-check-mark-3"></use>
</svg>
</p>
<p id="second">my second image
<svg>
<use xlink:href="#icon-check-mark-3"></use>
</svg>
</p>

Use fill="currentColor" to set color to your svgs by color css attribute.
.red {
color: red;
}
.green {
color: green;
}
svg {
width: 12px;
height: 12px;
}
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="12" height="12" viewBox="0 0 12 12">
<path fill="currentColor" id="delete" d="M7.249,5.977 C7.249,5.977 11.863,10.606 11.863,10.606 C11.978,10.724 11.975,10.917 11.856,11.039 C11.856,11.039 11.036,11.877 11.036,11.877 C10.917,11.998 10.726,12.001 10.611,11.883 C10.611,11.883 5.992,7.248 5.992,7.248 C5.992,7.248 1.308,11.850 1.308,11.850 C1.194,11.966 1.005,11.963 0.887,11.843 C0.887,11.843 0.076,11.014 0.076,11.014 C-0.043,10.893 -0.046,10.701 0.069,10.584 C0.069,10.584 4.659,5.977 4.659,5.977 C4.659,5.977 0.069,1.368 0.069,1.368 C-0.046,1.251 -0.043,1.060 0.076,0.939 C0.076,0.939 0.887,0.110 0.887,0.110 C1.005,-0.011 1.194,-0.013 1.308,0.104 C1.308,0.104 5.992,4.704 5.992,4.704 C5.992,4.704 10.611,0.070 10.611,0.070 C10.726,-0.048 10.917,-0.045 11.036,0.076 C11.036,0.076 11.856,0.914 11.856,0.914 C11.975,1.035 11.978,1.230 11.863,1.347 C11.863,1.347 7.249,5.977 7.249,5.977 Z" />
</svg>
<p class="red">
<svg>
<use xlink:href="#delete"></use>
</svg>
red
</p>
<p class="green">
<svg>
<use xlink:href="#delete"></use>
</svg>
green
</p>

How should I connect SVGs using canvas in responsive environment using HTML5?

I have 2 SVG rectangles connected by one canvas. I tried HTML5 to make it responsive. SVG is reacting to the code, but the canvas is static, so the connection between them is lost. What can i do?

Try to use an svg element as a ViewBox.
e.g.:
<svg viewBox="0 0 1 1">
<rect width="0.4" height="0.3" y="0" x="0" fill="yellow"/>
<rect width="0.2" height="0.2" y="0" x="0" fill="blue"/>
</svg>

<svg style="position:relative; top: 20x; left: -4px;width: 200; height: 175">
<rect x="5" y="2" rx="20" ry="20" width="100" height="150" style="fill:#FF7070;stroke:black;stroke-width:5;opacity:0.5">
</rect>
</svg>
<svg style="position:absolute; top: 80px; left: 430px">
<rect x="5" y="2" rx="20" ry="20" width="200" height="100" style="fill:#FF7070;stroke:black;stroke-width:5;opacity:0.5">
</rect>
</svg>
<canvas id="canvas1" style=" background-color : gray; position: absolute;top:112px;
left: 110px ;x-index:1;" width="323" height="7" `enter code here`>
</canvas>

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex

Image Masking with SVG Shapen - css

Related

I can't frame this image inside an SVG

How can i add backgroung image in the following svg?

How to position my svg image to the center of browser

Apply different CSS to <use> tag from one symbol svg?

How should I connect SVGs using canvas in responsive environment using HTML5?

Categories

Resources