Anyone could guide me with how to do CSS Image Clip path with SVG unique shapes?
Some people were suggesting to a third-party plugin like SVG Injector and all. Anyone could help me how to achieve this task that will work in all the browsers?
I have given one example image to make it better understanding. Kindly check the below image.
http://ktdev.khaleejtimes.ae/shape.jpg
Thanks & Appreciated.
First you need to draw a path with the desired shape. Next you use the shape to clip the image using <clipPath>
svg{border:1px solid}
<svg viewBox="0 0 643 525">
<defs>
<clipPath id="shape">
<path fill="none" d="M109,120c0,0,163,46,220,9s34-97,34-97s39.138-16.341,70-11c26.406,4.57,66.618,73.939,105,138
c37.199,62.089,73,119,73,119s10.398,18.504,0,44c-8.608,21.105-22.685,41.421-88.85,85.03C468.32,442.51,411,474,411,474
s-85,45-192,9l-5,1c0,0-34.254,15.226-60.675,10.088c-36-7-48.249-32.676-48.249-32.676S172,402,160,327S60,220,60,220
s-8.444-34,0-52C77.666,130.345,109,120,109,120z"/>
</clipPath>
</defs>
<image width="643" height="643" clip-path="url(#shape)" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" >
</image>
</svg>
I am using a text clippath to create an SVG displaying text so that I can animate the background to come in for a fun text reveal effect.
It works great in Chrome and Safari but in Firefox there are issues with the clippath.
<svg viewBox="0 0 600 150">
<!-- Clippath with text -->
<clippath id="cp-text">
<text text-anchor="left"
x="0"
y="50%"
dy=".35em"
class="text--line"
>
hello
</text>
</clippath>
<!-- Group with clippath for text-->
<g clip-path="url(#cp-text)" class="colortext">
<!-- Animated shapes inside text -->
<polyline class="anim-shape" points="559.91 153.84 526.17 -11.62 478.32 -11.62 512.05 150.84 559.91 153.84" style="fill: #4c4870"/>
<polyline class="anim-shape" points="599.75 149.75 599.92 -0.62 528.07 -0.62 558.75 150.75 599.75 149.75" style="fill: #93d2c4"/>
<polygon class="anim-shape" points="479.07 -11.62 395.78 -11.62 429.52 153.84 512.8 153.84 479.07 -11.62" style="fill: #f89c2c"/>
</g>
</svg>
I'm using CSS transforms to animate the polgyon shapes on load (scale and translate).
See codepen demo here: https://codepen.io/njpatten/pen/zwEeev
I've tried updating the polgyons inside the svg but it seems to be a problem with the clippath text rendering being delayed.
Any idea what might be the problem in Firefox? Thanks in advance for any suggestions or help!
It seems Firefox requires something to render beside the text mask you have created, while the animated shapes are with scale of 0,1 , it gets some problems.
I added this
<rect x="0" y="0" width="100%" height="100%" fill="transparent" />
just before first polygon and seems it now works similar to Chrome.
I think you can work with width and height if you don't want full width and height.
Hope it helps
I have this question in draw2d-js,
there is a user images and want to make it looks like css3 border-radius.
I have used draw2d.shape.basic.Image, but it did not work in style css border-radius.
Do any one knows how to make it?
Thanks very much for help.
If you take a look at the accepted answer here, I think you will find that it also answers your question...
Setting rounded corners for svg:image
For reference I am including the content of the above answer here as well.
'border-radius' doesn't apply to svg:image elements (yet anyway). A
workaround would be to create a rect with rounded corners, and use a
clip-path.
An example:
http://xn--dahlstrm-t4a.net/svg/clippath/border-radius-on-image.svg
The relevant part of the source:
<defs>
<rect id="rect" x="25%" y="25%" width="50%" height="50%" rx="15"/>
<clipPath id="clip">
<use xlink:href="#rect"/>
</clipPath>
</defs>
<use xlink:href="#rect" stroke-width="2" stroke="black"/>
<image xlink:href="boston.jpg" width="100%" height="100%" clip-path="url(#clip)"/>
It's also possible to create several rect elements instead of using
SUMMARY: An SVG sprite contains five icon <symbol> blocks, one of which references its own gradient definition by ID. It is no longer able to find this gradient and render properly.
JSFIDDLE: http://jsfiddle.net/Qtq24/1/
I am switching some graphics to SVG, and being that they are icons (in this case for social networking profiles) I'd like to keep them in a sprite (as I had with PNG before).
I've followed this guide to SVG sprites on CSS-tricks.com (along with this follow-up which advises using <symbol> instead of <g>).
I now have an SVG sprite file, social-sprite.svg, which you can view in full here.
This is one complete <svg> block containing five different <symbol> blocks, each with an id and with a viewBox attribute. In each case I got the SVG code for each symbol by preparing official icons in Adobe Illustrator and retaining the relevant parts of the processed code.
The .svg file is included via PHP as soon as the <body> tag opens (and this is why the main <svg> container inside it is marked with style="display: none;") so that the references to each symbol work from the HTML.
Four icons work perfectly, and the only one I am having trouble with is the YouTube icon, because it uses an internally-defined gradient. Here is the YouTube part of the SVG code:
<symbol id="youtube" viewBox="0 0 400 281.641">
<path id="Triangle" fill="#FFFFFF" d="M159.845,191.73l106.152-54.999L159.845,81.348V191.73z"/>
<path id="The_Sharpness" opacity="0.12" fill-rule="evenodd" clip-rule="evenodd" fill="#420000" d="M159.845,81.348l93.091,62.162
l13.061-6.778L159.845,81.348z"/>
<g id="Lozenge">
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="200.4204" y1="2.6162" x2="200.4204" y2="278.9292">
<stop offset="0" style="stop-color:#E52D27"/>
<stop offset="1" style="stop-color:#BF171D"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M392.928,62.226c0,0-3.839-27.073-15.617-38.995C362.371,7.583,345.626,7.506,337.947,6.59
c-54.975-3.974-137.441-3.974-137.441-3.974h-0.171c0,0-82.464,0-137.44,3.974c-7.68,0.916-24.419,0.993-39.364,16.641
C11.753,35.153,7.92,62.226,7.92,62.226s-3.929,31.792-3.929,63.583v29.805c0,31.791,3.929,63.582,3.929,63.582
s3.833,27.073,15.611,38.995c14.945,15.646,34.575,15.152,43.318,16.792c31.43,3.015,133.571,3.946,133.571,3.946
s82.552-0.124,137.526-4.099c7.679-0.915,24.424-0.993,39.363-16.64c11.778-11.922,15.617-38.995,15.617-38.995
s3.923-31.791,3.923-63.582v-29.805C396.851,94.017,392.928,62.226,392.928,62.226z M159.863,191.73l-0.018-110.383
l106.152,55.384L159.863,191.73z"/>
</g>
</g>
</symbol>
And this is called in the HTML with:
<svg width="30" height="21">
<use xlink:href="#youtube" src="fallback.png" width="30" height="21" />
</svg>
The opening two paths work fine, the problem is that in this new combined sprite SVG file, with each icon separated as a <symbol>, the "Lozenge" <path> is unable to find the #SVGID_1_ reference to the <linearGradient>.
In Firefox this causes the lozenge to display as white (I assume, perhaps it is not displaying at all - not really looked into it):
whilst Chrome renders it in black:
Obviously neither is acceptable. The only thing I can do at the moment is remove fill="url(#SVGID_1_)" on the path and just fill with a flat colour red appropriate to the YouTube logo. This is not a proper solution though, even discounting the fact that bastardising the YouTube logo in this way would not be accepted under their brand guidelines.
Things I've tried (and had no luck with):
removing the two <g> wrappers that surround the gradient and the path, so the whole of the symbol is just <path>-<path>-<linearGradient>-<path>
wrapping the gradient definition inside a <defs> container
wrapping it in a <defs> and also moving it to the top of the SVG file, i.e. outside the bounds of the YouTube-specific <symbol>
changing ID name (you never know!)
redefining the gradient with percentages rather than pixel values
So how do I get an already-internal <symbol> to reference an also-internal <linearGradient> definition?
EDIT: It turns out the gradient fails when the whole <svg> block is marked with style="display: none;". If this style is removed, the gradient renders properly. But as a reminder, this styling is added so that when you import the SVG sprite it is not rendered instantly on the page, and just allows you to make references to the id-defined symbols as required.
visibility: hidden or opacity: 0 both allow the gradient to render properly, obviously they don't offer proper solutions though as they still demarcate the space that the SVG would have taken up if visible.
After discovering all this, I was pretty sure it would be no problem to have the fully visible <svg> with no stylings added INSIDE a container <div> which is hidden. However, even this causes the gradient not to render. I'm no closer to solving the issue.
Firstly please note the edit to my question - whereupon I discover that the use of display: none to hide the SVG symbols until we need them was the problem.
I kept fiddling and settled upon this "answer", which is far from perfect, but should still be reliable for any such situation.
All you need to do is wrap the entire <svg> code in a <div> container which must be displayed but will never affect layout, so I've just done this via mega overkill CSS such as:
height: 0; width: 0; position: absolute; visibility: hidden;
And this works great. See the final fiddle: http://jsfiddle.net/Qtq24/5/
If anyone has a better solution, I'd love to hear it as this feels like a bit of a hacky way of doing it but I guess no more hacky than having to use display: none; anyway.
Don't use style="display: none;" in SVG. You have it on the root <svg> element. Either visibility:hidden, height/width="0" or <defs> are better alternatives.
There used to be a bug in Firefox with gradient elements in symbols. That bug was fixed many versions ago now. The original code works as expected.
<svg width="30" height="21">
<symbol id="youtube" viewBox="0 0 400 281.641">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="200.4204" y1="2.6162" x2="200.4204" y2="278.9292">
<stop offset="0" style="stop-color:#E52D27"/>
<stop offset="1" style="stop-color:#BF171D"/>
</linearGradient>
<path id="Triangle" fill="#FFFFFF" d="M159.845,191.73l106.152-54.999L159.845,81.348V191.73z"/>
<path id="The_Sharpness" opacity="0.12" fill-rule="evenodd" clip-rule="evenodd" fill="#420000" d="M159.845,81.348l93.091,62.162
l13.061-6.778L159.845,81.348z"/>
<g id="Lozenge">
<g>
<path fill="url(#SVGID_1_)" d="M392.928,62.226c0,0-3.839-27.073-15.617-38.995C362.371,7.583,345.626,7.506,337.947,6.59
c-54.975-3.974-137.441-3.974-137.441-3.974h-0.171c0,0-82.464,0-137.44,3.974c-7.68,0.916-24.419,0.993-39.364,16.641
C11.753,35.153,7.92,62.226,7.92,62.226s-3.929,31.792-3.929,63.583v29.805c0,31.791,3.929,63.582,3.929,63.582
s3.833,27.073,15.611,38.995c14.945,15.646,34.575,15.152,43.318,16.792c31.43,3.015,133.571,3.946,133.571,3.946
s82.552-0.124,137.526-4.099c7.679-0.915,24.424-0.993,39.363-16.64c11.778-11.922,15.617-38.995,15.617-38.995
s3.923-31.791,3.923-63.582v-29.805C396.851,94.017,392.928,62.226,392.928,62.226z M159.863,191.73l-0.018-110.383
l106.152,55.384L159.863,191.73z"/>
</g>
</g>
</symbol>
<use xlink:href="#youtube" width="30" height="21" />
</svg>
I have easily made a mask with a PNG (black circle, transparent background) and using -webkit-mask-image:url(images/mask.png) for browsers like chrome. But i am having serious issues getting the mask to show in Firefox using SVG
<svg>
<defs>
<mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<image width="78px" height="78px" xlink:href="images/mask.png"/>
</mask>
</defs>
<foreignObject width="78px" height="78px" style="mask: url(#mask);">
<img src="images/avatar-sample.jpg" />
</foreignObject>
</svg>
I really cannot see why this isn't working!
According to http://www.w3.org/TR/SVG/propidx.html you can apply a mask to container elements and graphics elements. Unfortunately <foreignObject> is in neither of these lists so the correct rendering for that element is to ignore the mask property. IE and Firefox are therefore correct in their rendering of this example.
Because IE does not understand the "foreign" object, you have to work around it with javascript and check if you can support it, if so inject it in, and if not avoid it. then you have to use IE's built in color filters to create your own chromakey effect specifically for IE. this site below shows you how to do it with examples.
http://thenittygritty.co/css-masking
You could rewrite your svg like this to make it work in all svg-supporting browsers:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<image width="78" height="78" xlink:href="images/mask.png"/>
</mask>
</defs>
<image xlink:href="images/avatar-sample.jpg" width="78" height="78"/>
</svg>