I'm new to Svg and can't figure out why I'm unable to add a stroke to this polygon
<img class="clip-svg" src="http://placekitten.com/g/1000/1000" />
<svg xmlns="http://www.w3.org/2000/svg">
<clipPath id="myClip" clipPathUnits="objectBoundingBox">
<polygon points="0,1 0.15,0 1,0 0.85,1" style="stroke:red;stroke-width:5"/>
</clipPath>
</svg>
My CSS:
.clip-svg{
-webkit-clip-path: url(#myClip);
clip-path: url(#myClip);
max-height:150rem;
}
A clipPath just defines the shape to be cut away. You can't style a clip path.
Related
I have a full width header div with a color background:
<div style="background:red;" id="header">
</div>
I want to cut out the red background according to a path in the SVG file so that the svg paths are see throughout/transparent. Cutting through the red and showing whatever is behind the red background.
I have tried to embed the svg code and using the clip-path CSS property:
clip-path: url(mySVGfile.svg#myClipPath);
Referencing the path set here:
<clipPath id="myClipPath">
<path fill="#FFFFFF" d="..."
/>
</clipPath>
You don't need to reference your file and include it inside your code at the same time. Hope this helps.
#behind{
position:absolute
}
#masked{
position: relative;
background:red;
height:100px;
clip-path:url(#mask)
}
<div id="behind"><h1>THE TEXT BEHIND THE MASK</h1></div>
<div id="masked">I'm<br>inside here</div>
<svg>
<defs>
<clipPath id="mask" >
<path id="curve" d="M 0 0 L 200 100 L 0 100 z" />
</clipPath>
</defs>
</svg>
Is there any way to decrease svg path thickness? I have following icon in svg format but this icon is made by single path. Adjusting atrributes "fill" or "stroke-width" not working.
What I am trying to do is reduce thickness of visible border by half.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
<g>
<path d="M24,14.059V5.584L18.414,0H0v32h24v-0.059c4.499-0.5,7.998-4.309,8-8.941C31.998,18.366,28.499,14.556,24,14.059z M17.998,2.413L21.586,6h-3.588V2.413z M2,30V1.998h14v6.001h6v6.06c-1.752,0.194-3.352,0.89-4.652,1.941H4v2h11.517 c-0.412,0.616-0.743,1.289-0.994,2H4v2h10.059C14.022,22.329,14,22.661,14,23c0,2.829,1.308,5.351,3.349,7H2z M23,29.883 c-3.801-0.009-6.876-3.084-6.885-6.883c0.009-3.801,3.084-6.876,6.885-6.885c3.799,0.009,6.874,3.084,6.883,6.885 C29.874,26.799,26.799,29.874,23,29.883z M20,12H4v2h16V12z" style="/* transform: scale(0.5, 0.5); *//* stroke: black; */"/>
<g>
<polygon points="28,22 24.002,22 24.002,18 22,18 22,22 18,22 18,24 22,24 22,28 24.002,28 24.002,24 28,24 "/>
</g>
</g>
</svg>
Is there any online editor which can do that? Or maybe there is some css tricks that I don't know?
Path thickness is negligible. Your path is not defining the lines you see, it is defining the border of those lines explicitly. You can see what the path describes by adding stroke="red". You can't decrease the thickness of the filled-in polygons by fiddling with the attributes alone. The only thing you can do without completely redoing the path is to use the background-colour stroke to erase part of the filled-in portion, though I'd argue it can't look as good as a hand-crafted icon:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
<g>
<path stroke-width="1" stroke="white" d="M24,14.059V5.584L18.414,0H0v32h24v-0.059c4.499-0.5,7.998-4.309,8-8.941C31.998,18.366,28.499,14.556,24,14.059z M17.998,2.413L21.586,6h-3.588V2.413z M2,30V1.998h14v6.001h6v6.06c-1.752,0.194-3.352,0.89-4.652,1.941H4v2h11.517 c-0.412,0.616-0.743,1.289-0.994,2H4v2h10.059C14.022,22.329,14,22.661,14,23c0,2.829,1.308,5.351,3.349,7H2z M23,29.883 c-3.801-0.009-6.876-3.084-6.885-6.883c0.009-3.801,3.084-6.876,6.885-6.885c3.799,0.009,6.874,3.084,6.883,6.885 C29.874,26.799,26.799,29.874,23,29.883z M20,12H4v2h16V12z" style="/* transform: scale(0.5, 0.5); *//* stroke: black; */"/>
<g>
<polygon stroke-width="1" stroke="white" points="28,22 24.002,22 24.002,18 22,18 22,22 18,22 18,24 22,24 22,28 24.002,28 24.002,24 28,24 "/>
</g>
</g>
</svg>
I am trying to create a SVG circle with an image inside of it. The image is supposed to be inside of the SVG circle with a radius that is slightly below the radius of the outer circle. To clip the image I am using the <clipPath> element on the <image> element. But is won't clip the right path. Here is a Codepen to give an example:
https://codepen.io/Martin36/pen/BdpMbX
As you can see in the example the <clipPath> clips the upper left corner of the image even though the clipping <circle> is placed directly above the <image> element. Here is the code:
<svg width="900" height="300" >
<g class="hotel" transform="translate(150,150)">
<circle r="120" style="fill: rgb(56, 255, 0); opacity: 0.6;" class=""></circle>
<clipPath id="clipCircle">
<circle r="100"></circle>
</clipPath>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://res.cloudinary.com/martin36/image/upload/v1502102349/hotel_yg1fg1.jpg"
clip-path="url(#clipCircle)"
width="250" height="250"
transform="translate(-125,-125)">
</image>
</g>
</svg>
Does anyone know why this happens and how to fix it?
I solved the problem by changing the cx and cy properties of the <circle> element inside the <clipPath> tag to the widthof the image divided by two. The codepen is updated with the correct code. But I will post it here also:
<svg width="900" height="300" >
<g class="hotel" transform="translate(150,150)">
<circle r="120" style="fill: rgb(56, 255, 0); opacity: 0.6;"></circle>
<clipPath id="clipCircle">
<circle r="100" cx="125" cy="125"> </circle>
</clipPath>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://res.cloudinary.com/martin36/image/upload/v1502102349/hotel_yg1fg1.jpg"
clip-path="url(#clipCircle)"
width="350" height="250"
transform="translate(-125,-125)">
</image>
</g>
</svg>
I am having some issues using an SVG clip-path. I can't work out how to make the path align with the image I am clipping - it is always way off. This is my markup:
HTML
<img class="svg-clipped" src="https://unsplash.it/1200/1200" alt="">
<svg height="0" width="0">
<defs>
<clipPath id="svgPath">
<path d="M124.8,656.7H142V501.9c65.5-27.5,53.6,10.8,129,4.7v150.1h17.2v20.7H124.8V656.7z"/>
</clipPath>
</defs>
</svg>
SCSS
.svg-clipped {
-webkit-clip-path: url(#svgPath);
clip-path: url(#svgPath);
}
And a Codepen here:
https://codepen.io/mikehdesign/pen/yoOZYo
If you scroll down you will see the SVG outline I am using. Ideally I would like it to be centered on the image, though top left would be fine too. As it is I can't work out what the logic is behind the positioning.
Thanks!
Mike
When applying clip paths to HTML elements, it is highly recommended that you use the objectBoundingBox coordinate space rather than the default user space coordinates (userSpaceOnUse).
In objectBoundingBox units, the coordinates map directly to the object the clip is being applied to. So (0,0) means the top-left of the object, and (1,1) maps to the bottom-right of the object.
So if you stick to coordinates in that range, your clipping path is guaranteed to fall directly over your image.
Here's a demo with a simple diamond clip path. I'll you to do the conversion of your shape to objectBoundingBox coordinates.
.svg-clipped {
-webkit-clip-path: url(#svgPath);
clip-path: url(#svgPath);
}
<img class="svg-clipped" src="https://unsplash.it/1200/1200" alt="">
<svg height="0" width="0">
<defs>
<clipPath id="svgPath" clipPathUnits="objectBoundingBox">
<path d="M 0.5,0 L 1,0.5 0.5,1, 0,0.5 Z"/>
</clipPath>
</defs>
</svg>
Hello, I'm using slick slider and I want to clip-path the container but the clip-path doesn't work well..
this is my svg path
<svg width="0" height="0">
<defs>
<clipPath id="mask1">
<path id="curve" d="m242.6,393.7c-82.2,-4.7 -138.1,-15.4 -191.2,-36.6 -19.3,-7.7 -36.4,-16.1 -47.7,-23.5l-3.2,-2.1 -0,-71.5c-0,-39.3 -0.1,-113.9 -0.3,-165.8l-0.3,-94.2 371.1,0 371.1,0 0,152 0,152 -5.8,3.7c-7.8,5 -14.5,8.8 -23.4,13.4 -70.4,36.3 -187.2,62.5 -317.4,71.2 -28.6,1.9 -31.6,2 -91.2,1.9 -31,-0 -58.8,-0.2 -61.9,-0.4z">
</path>
</clipPath>
</defs>
</svg>
the slider works but the clip-path doesn't fit the 100% window..
Thanks.. and sorry for my English..
You should convert your clipPath to one using bounding box units:
<clipPath clipPathUnits="objectBoundingBox" ... >
When you use bounding box units, all your clip path coordinates should be defined in the range 0..1.
http://www.w3.org/TR/SVG/masking.html#EstablishingANewClippingPath
If you do this, the clipping path will be given the same size as the the element you apply it to.
img {
width: 100%;
clip-path: url(#mask1);
-webkit-clip-path: url(#mask1);
}
<svg width="0" height="0">
<defs>
<clipPath id="mask1" clipPathUnits="objectBoundingBox">
<path id="curve"
transform="scale(0.00135, 0.00254)"
d="m242.6,393.7c-82.2,-4.7 -138.1,-15.4 -191.2,-36.6 -19.3,-7.7 -36.4,-16.1 -47.7,-23.5l-3.2,-2.1 -0,-71.5c-0,-39.3 -0.1,-113.9 -0.3,-165.8l-0.3,-94.2 371.1,0 371.1,0 0,152 0,152 -5.8,3.7c-7.8,5 -14.5,8.8 -23.4,13.4 -70.4,36.3 -187.2,62.5 -317.4,71.2 -28.6,1.9 -31.6,2 -91.2,1.9 -31,-0 -58.8,-0.2 -61.9,-0.4z">
</path>
</clipPath>
</defs>
</svg>
<img src="//placekitten.com/400/150"/>
What I have done in the example above is to use a transform to scale the clip path to size 1x1. It's easier than recreating the shape with new coordinates.