I have created the below CSS Clip path with SVG. I would like to know that how to make it some unique shapes rather than the normal hexagonal mask? Also i would like to give border radius to the edges. Any help would be appreciated.
Thanks in Advance.
http://ktdev.khaleejtimes.ae/bg/bg-shapenw1.html
.svg_pan {
width: 90%;
height: 600px;
border-radius: 50px;
}
<svg class="svg-graphic svg_pan" width="180" height="200" viewBox="0 0 560 645" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
<g>
<clipPath id="hexagonal-mask">
<polygon points="130,0 0,160 0,485 270,645 560,485 460,160" />
</clipPath>
</g>
<a xlink:href="#">
<image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="al-seef.jpg" />
</a>
</svg>
You will need to calculate the d attribute for a path - your polygon with rounded corners. In this case I'm using quadratic Béziers for the rounded corners. I hope it helps.
.svg_pan {
border:1px solid;
}
<svg class="svg-graphic svg_pan" width="180" height="200" viewBox="0 0 560 645" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<clipPath id="hexagonal-mask-rounded">
<path d="M147.996,8.725 Q130,0 117.388,15.522L12.612,144.478 Q0,160 0.000,180.000L0.000,465.000 Q0,485 17.206,495.196L252.794,634.804 Q270,645 287.512,635.338L542.488,494.662 Q560,485 554.118,465.884L465.882,179.116 Q460,160 442.004,151.275Z" />
</clipPath>
</defs>
<a xlink:href="#">
<image clip-path="url(#hexagonal-mask-rounded)" height="650" width="650" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" />
</a>
</svg>
This is a tool you may use to calculate the d attribute for the path using the points attribute of the polygon: https://enxaneta.github.io/SVG_polygon_with_rounded_corners/
Related
The initial SVG figure with pattern:
<svg width="200" height="200" viewBox="0 0 100 100">
<defs>
<pattern id="img-dotted-dots" x="0" y="0" height=".08" width="7.69%">
<circle cx="2" cy="2" fill="white" r="0.8"></circle>
</pattern>
<mask id="img-dotted-mask">
<rect width="100" height="100" fill="url(#img-dotted-dots)"></rect>
</mask>
</defs>
<path d="M0 0 H 100 V 100 H 0 Z" mask="url(#img-dotted-mask)" fill="#1063B1"></path>
</svg>
Need to achieve:
One instance of the SVG figure with pattern for refferencing with CSS as clip-path.
I have tried to create SVG clipPath element and bind to CSS clip-path by this way
.figure {
width: 300px;
height: 300px;
clip-path: url(#img-dotted-clip-path);
background-color: #1063B1;
}
<div class="figure"></div>
<svg width="0" height="0" viewBox="0 0 100 100">
<defs>
<clipPath
clipPathUnits="objectBoundingBox"
id="img-dotted-clip-path">
<pattern
patternUnits="objectBoundingBox"
patternContentUnits="objectBoundingBox"
x="0" y="0" height="0.1" width="0.1">
<circle cx="0" cy="0" fill="white" r="0.5"></circle>
</pattern>
</clipPath>
</defs>
</svg>
Nothing happens.
Expected result - the same as the previous snippet.
For comparing:
If I use SVG rect - CSS clip-path works.
If pattern - doesn't
.figure {
width: 300px;
height: 300px;
clip-path: url(#img-dotted-clip-path);
background-color: #1063B1;
}
<div class="figure"></div>
<svg width="0" height="0" viewBox="0 0 100 100">
<defs>
<clipPath
clipPathUnits="objectBoundingBox"
id="img-dotted-clip-path">
<rect width="1" height="1"></rect>
</clipPath>
</defs>
</svg>
The only things that are valid inside a clip path are:
Shape elements (‘circle’, ‘ellipse’, ‘line’, ‘path’, ‘polygon’, ‘polyline’, ‘rect’)
‘text’
‘use’
Plus you can use animation elements etc to animate the clip path. However, only the shapes of those elements are used. Effects such as patterns, filters, etc are ignored.
The only way you could get the effect you want to work as a clipping path would be to add numerous <circle> elements to your <clipPath>.
<clipPath>
<circle>
<circle>
<circle>
<circle>
... etc ...
</clipPath>
But you could use a mask instead. Masks allow patterns.
.figure {
width: 300px;
height: 300px;
-webkit-mask: url(#img-dotted-mask);
mask: url(#img-dotted-mask);
background-color: #1063B1;
}
<p>This only works in Firefox</p>
<div class="figure"></div>
<svg width="0" height="0">
<defs>
<pattern id="img-dotted-pattern"
viewBox="0 0 1 1"
patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
<rect width="1" height="1" fill="black"/>
<circle cx="0.5" cy="0.5" fill="white" r="0.15"></circle>
</pattern>
<mask id="img-dotted-mask">
<rect width="2000" height="2000" fill="url(#img-dotted-pattern)"/>
</mask>
</defs>
</svg>
However inline SVG masks applied to HTML elements, like my example above, only work in Firefox. To get an SVG mask to work in Chrome, you would need to use mask or mask-image with an external or Data URL (as Temani has done in their answer).
You can recreate the same thing using mask combined with radial-gradient
.figure {
width: 300px;
height: 300px;
background:linear-gradient(to right,red,#1063B1);
/*radius here size here*/
-webkit-mask:radial-gradient(3px, #fff 97%,transparent 100%) 0 0/20px 20px;
mask:radial-gradient(3px, #fff 97%,transparent 100%) 0 0/20px 20px;
}
body {
background:#f2f2f2;
}
<div class="figure"></div>
Or consider the SVG inside the mask property. Make sure to escape the # and correctly set the viewbox and width/height to have a perfect repeat
.figure {
width: 300px;
height: 300px;
background:linear-gradient(to right,red,#1063B1);
-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="192" viewBox="0 0 100 90"><defs><pattern id="img-dotted-dots" x="0" y="0" height=".08" width="7.69%"><circle cx="2" cy="2" fill="white" r="0.8"></circle></pattern><mask id="img-dotted-mask"><rect width="100" height="100" fill="url(%23img-dotted-dots)"></rect></mask></defs><path d="M0 0 H 100 V 100 H 0 Z" mask="url(%23img-dotted-mask)" fill="%231063B1"></path></svg>');
mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="192" viewBox="0 0 100 90"><defs><pattern id="img-dotted-dots" x="0" y="0" height=".08" width="7.69%"><circle cx="2" cy="2" fill="white" r="0.8"></circle></pattern><mask id="img-dotted-mask"><rect width="100" height="100" fill="url(%23img-dotted-dots)"></rect></mask></defs><path d="M0 0 H 100 V 100 H 0 Z" mask="url(%23img-dotted-mask)" fill="%231063B1"></path></svg>');
}
body {
background:#f2f2f2;
}
<div class="figure"></div>
I have the following SVG image:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 66.667 108">
<pattern id="i" width="100%" height="100%">
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/3/38/Bangalore_Panorama_edit1.jpg" width="45" height="49" preserveAspectRatio="xMinYMin slice"/>
</pattern>
<rect x="21.667" y="0" width="45" height="49" fill="url(#i)"/>
</svg>
I need the rectangle to fill with an image equivalent to the following CSS syntax:
background-size:cover;
background-image:url("image.jpg");
background-repeat:no-repeat;
background-position:right top;
Thanks to this post, I got them all except background-position:right top. Is this possible in an SVG image? If so, how can I achieve this?
To mimic the behavior, so that the top right corner of the picture is located at the top right corner of the rect, you just need to change the preserveAspectRatio="xMinYMin slice" of the image to preserveAspectRatio="xMaxYMin slice":
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 66.667 108">
<pattern id="i" width="100%" height="100%">
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/3/38/Bangalore_Panorama_edit1.jpg" width="45" height="49" preserveAspectRatio="xMaxYMin slice"/>
</pattern>
<rect x="21.667" y="0" width="45" height="49" fill="url(#i)"/>
</svg>
I am trying to resize an svg image with a mask using css. The issue I am running into is with Safari as it doesn't seem to allow the CSS classes to override the default values. Here's the inline svg code:
<svg width="48" height="48" class="icon green">
<defs>
<mask id="svgmask-947">
<image class="svg-image" width="48" height="48" href="/themes/custom/assets/media/images/fa-png/campus.png"></image>
</mask>
</defs>
<rect class="icon-mask" mask="url(#svgmask-947)" width="48" height="48" y="0" x="0"></rect>
The SVG won't resize, if I simple apply any class to it with a new width/height in CSS. Here's sample CSS:
.icon, rect, mask image {
width:24px;
height: 24px;
}
Applying the CSS in all other browsers works, just not Safari.
Thanks for any insight and help.
Found the solution as I was missing the viewbox attribute:
<svg width="48" height="48" class="icon green" viewBox="0 0 48 48">
<defs>
<mask id="svgmask-980">
<image class="svg-image" width="48" height="48" href="/themes/custom/assets/media/images/fa-png/campus.png"></image>
</mask>
</defs>
<rect class="icon-mask" mask="url(#svgmask-980)" width="48" height="48" y="0" x="0"></rect>
I have the following svg:
<svg height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none" style="display: block; position: absolute; top: 0;">
<defs>
<pattern id="img1" patternUnits="objectBoundingBox" width="100%" height="100%">
<image xlink:href="https://media.npr.org/assets/img/2016/06/22/gettyimages-467390112_custom-e8fa0c9a7224b7172555577fde25a08949bde2d2-s900-c85.jpg" x="0" y="-20" width="100" height="100"/>
</pattern>
</defs>
<polygon points="0 100, 50,50 100,100" id="abajo" style="stroke-width:0" fill="url(#img1)"/>
</svg>
It's not working as expected because it enlarge te face of the people on the image as follows:
But it should look like this:
Does having a triangular polygon affects the image? How can I solve it, I need 4 triangle figures with images inside to be clickables.
Well this is working as intended. You specify a pattern whose unit should fill the bounding box of the container, and then specify a 2:1 container - so it stretches the image. There are lots of permutations that preserve the aspect ratio of the image - it depends on exactly what behavior you want.
This is one version that preserves the aspect ratio of the SVG itself even when it's asked to fill a larger space.
<svg height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" style="display: block; position: absolute; top: 0;">
<defs>
<pattern id="img1" patternUnits="objectBoundingBox" width="100%" height="100%">
<image xlink:href="https://media.npr.org/assets/img/2016/06/22/gettyimages-467390112_custom-e8fa0c9a7224b7172555577fde25a08949bde2d2-s900-c85.jpg" x="0" y="-20" width="100" height="100"/>
</pattern>
</defs>
<polygon points="0 100, 50,50 100,100" id="abajo" fill="url(#img1)" />
</svg>
Or if you want to adjust the pattern itself, you can double the height of the pattern and offset it in Y to adjust for the 2:1 ratio of your container:
<svg height="100%" width="100%" viewBox="0 0 100 100" style="display: block; position: absolute; top: 0;">
<defs>
<pattern id="img1" patternUnits="objectBoundingBox" y="-100%" width="100%" height="200%">
<image xlink:href="https://media.npr.org/assets/img/2016/06/22/gettyimages-467390112_custom-e8fa0c9a7224b7172555577fde25a08949bde2d2-s900-c85.jpg" x="0" y="0" width="100" height="100" preserveAspectRatio="xMidYMax meet"/>
</pattern>
</defs>
<polygon points="0 100, 50,50 100,100" id="abajo" fill="url(#img1)" />
</svg>
This is another version that uses a filter to fill in the image.
<svg height="100%" width="100%" viewBox="0 0 100 100" style="display: block; position: absolute; top: 0; background:grey">
<defs>
<filter id="img1" x="0%" y="0%" width="100%" height="100%" >
<feImage xlink:href="https://media.npr.org/assets/img/2016/06/22/gettyimages-467390112_custom-e8fa0c9a7224b7172555577fde25a08949bde2d2-s900-c85.jpg" x="0" y="0" width="100" height="100" preserveAspectRatio="xMidYMax meet"/>
<feComposite operator="in" in2="SourceGraphic"/>
</filter>
</defs>
<polygon points="0 100, 50,50 100,100" id="abajo" filter="url(#img1)" />
</svg>
I'm a newbie in SVG so it's probably an easy question. I'm trying to make an SVG Mask with a simple triangle shape inside a rectangle. What I want to achieve is to get the rectangle responsive with his width but the triangle should
- get a fixed size
- be always at the center of the viewport
You'll understand better with my snippet:
.header-arrow {
height: 70px;
}
svg {
height: inherit;
}
#arrow-down-alpha {
transform: translateX(calc(50vw - 130px/2));
}
<div class="header-arrow">
<svg width="100%">
<defs>
<mask id="myMask" x="0" y="0" width="100%" height="100%">
<rect fill="white" x="0" y="0" width="100%" height="100%" />
<polygon id="arrow-down-alpha" fill="black" x="00" y="0" width="165px" height="100%" points="55.91 37.8 111.81 0 0 0 55.91 37.8" />
</mask>
</defs>
<rect id="base-mask" mask="url(#myMask)" x="0" y="0" width="100%" height="100%" />
</svg>
</div>
It's workning right now in chrome, but the translateX (or translate) is not working in firefox and edge. I've tried to use the transform SVG attribute but it seems that I can't use percentages values.
I'm not realy familiar with the viewbox but I'm not sure it will help in this case.
Thanks anyway for any kind of help !
Here's one way to achieve what you want without relying on new units or calc(). It should be cross-browser compatible also.
How it works:
We wrap the triangle in a nested SVG. We use an SVG because it has an x attribute which can take percentages.
We position this nested SVG at x="50%". It is now centred in the mask (roughly, see next step).
We move the triangle shape so it is centred at x=0. That's so that it is not offset from the centre of the mask.
We set overflow="visible" on the nested SVG so the part of the triangle that is now off the left of the SVG (ie. x < 0) are not clipped.
.header-arrow {
height: 70px;
}
svg {
height: inherit;
}
<div class="header-arrow">
<svg width="100%">
<defs>
<mask id="myMask" x="0" y="0" width="100%" height="100%">
<rect fill="white" x="0" y="0" width="100%" height="100%" />
<svg x="50%" overflow="visible">
<polygon fill="black" points="0 38 56 0 -56 0" />
</svg>
</mask>
</defs>
<rect id="base-mask" mask="url(#myMask)" x="0" y="0" width="100%" height="100%" />
</svg>
</div>