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.
Related
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>
How can I resize my SVG Logo for responsiveness on Mobile?
Here's my Fiddle and my code is below:
body {
background:black;
}
#media screen and (max-width: 500px) {
svg {
width:50%;
}
}
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg version="1.1" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>Logo</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Your-Score" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Desktop-Your-Score" sketch:type="MSLayerGroup" transform="translate(-23.000000, -24.000000)" font-weight="normal" font-family="Gill Sans" letter-spacing="1.16666663" font-size="28" sketch:alignment="middle" fill="#FFFFFF">
<g id="Header" sketch:type="MSTextLayer">
<g id="Primary-Nav-[home]-Copy">
<g id="Logo" transform="translate(23.000000, 18.000000)">
<text id="TOMORROW’S">
<tspan x="0.0328778028" y="27">TOMORROW’S</tspan>
<tspan x="36.2975262" y="58">SCORE</tspan>
</text>
</g>
</g>
</g>
</g>
</g>
</svg>
For scaling via the img element to work, the SVG image needs to have its width, height and viewBox attributes set inside it. Here is how that looks:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="70px" height="70px" viewBox="0 0 70 70">
<circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>
</svg>
When setting the width, height and viewBox property, you tell the browser what part of the virtual canvas to draw. The view box tells the upper left and lower right corner of the virtual canvas. Thus, if the image is scaled to a size bigger than that, the whole image is scaled up, instead of just making the virtual canvas bigger (resulting in white space next to the SVG shapes in the image).
For more clarification search for viewBox property related to SVG.
Always Set Image Width Via CSS Properties
Do not use the width and height attributes of the img element. It will not give the desired effect. The browsers treat these attributes differently than the corresponding CSS properties.
Use your SVG inside of an <img> tag, for example:
<img src="my_SVG_file.svg" alt="" />
Then you can use standard CSS to affect the <img> tag & make it mobile responsive.
img {
max-width: 100%;
}
CODEPEN DEMO
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.
I tried to display a circle centered in a div.
This is my solution, but the circle appears cut.
What is the problem?
<svg>
<svg x="10%" y="20%">
<g transform="scale(1, 1)">
<circle r="100"/>
</g>
</svg>
</svg>
JSFiddle
By default inner <svg> elements clip their contents. You can set overflow="visible" if you don't want this to happen.
In addition the outer <svg> element has no width/height so it falls back to the defaults of 300 x 150.
If you fix it, it looks like this
html, body {
width: 100%;
height: 100%;
}
<svg width="100%" height="100%">
<svg x="50%" y="50%" overflow="visible">
<g transform="scale(1,1)">
<circle r="100"></circle>
</g>
</svg>
</svg>