I have this svg image that I want to change the colour of, however I cannot seem to get it to work.
<svg width="20" height="20" fill="#FFF">
<image xlink:href="images/person.svg" fill="#FFF" width="20" height="20" />
</svg>
From the SVG 1.1 spec:
The result of processing an ‘image’ is always a four-channel RGBA
result.
In other words, the SVG is rendered as a bitmap. And you can't change the colour of a bitmap with fill.
Related
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
What I am trying to do is to scale my svg path with CSS by just setting the height+width of the whole svg as well as making use of the CSS property transform on the svg's <g> tag.
In the first place everything looked kinda simple and logical, because I'm just having a pattern with a single reference to my patter image -which should be repeated as many times to fill my whole shape. I need more or less the same effect of the CSS property background-repeat: repeat; within my shape.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="Pattern" x="0" y="0" width="149" height="151" patternUnits="userSpaceOnUse">
<image xlink:href="bg.jpg" x="0" y="0" width="149" height="151" />
</pattern>
</defs>
<g>
<path fill="url(#Pattern)" d="M15.83,262c1.531-1.814,2.579-3.021,5.029-5.861c22.052-25.553,84.151-110.104,94.935-122.23
C88.973,92.133,48.727,34.085,32.509,16.395C26.863,9.311,16.216,4.047,6.333,4.047h86.315c-11.26,0-11.265,13.729-2.829,26.479
l49.855,76.479l19.734-25.592l8.506-11.031c0,0-0.006,14.736-0.006,34.438c-0.701,0.935-7.822,10.457-8.519,11.315
c-2.872,3.544-5.229,6.468-6.915,8.573c5.24,7.763,10.384,15.356,15.486,22.813c-0.053,34.541-0.031,68.4-0.031,68.4
l-40.155-64.326c-8.353,12.002-51.124,69.823-68.554,93.937c-2.54,3.515-7.209,10.228-7.438,10.567
c-1.626,2.441-2.108,3.094-3.922,5.899L15.83,262L15.83,262z"/>
</g>
</svg>
SVG patterns (and filters) don't work like CSS's background-repeat, so what you want to do is not possible using SVG. You can't have an implicitly sized viewBox and SVG element AND have fixed size pattern elements: pattern elements will be sized in viewBox units by default.
That said, there are hacky ways to get what you want to do if you're not doing something complex. For example, you can set background-repeat: repeat on the entire SVG element, and then use a filter to paint over the area outside your shape so it looks like its filled. But yeeesh...
I'm trying to animation a svg star with glittering made in css.
The thing is the star moves toward 0,0 position of svg during the animation.
I would like the star to stay in position during the animation.
What I'm guessing is that the position of each points that make the star (in path) are not used during the animation.
<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g>
<rect fill="#009eff" height="351.7699" width="300.36301" class="color-fill"/>
<path class="glittering" fill="#ffcc00" d="m270.88123,28.60792l-7.20074,6.20193l1.02679,9.44777l-8.12354,-4.93181l-8.66808,3.89605l2.18013,-9.24996l-6.38396,-7.03987l9.47093,-0.78498l4.72256,-8.24694l3.67325,8.76482l9.30264,1.94299z"/>
</g>
</svg>
I made a codepen so that you can see what I mean.
codepen
Can you help me community?
Thanks a lot !
When you scale the star, you're effectively multiplying all the path coordinates by the scale factor. Since the path coordinates are all some distance from the origin, the star is moving about.
You need to define the star coordinates centered on the origin, and then use a <g> element with a suitable transform to park the star where you actually want it to be.
Assuming you plan to have more than one star in this picture, I would recommend defining the star shape in the <defs> section. This will make your SVG much easier to work with:
<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="star1" fill="#ffcc00" d="M0.000-10L2.939-4.05L9.511-3.09L4.755 1.55L5.878 8.09L0 5L-5.878 8.09L-4.755 1.55L-9.511 -3.09L-2.939-4.05L0-10Z"/>
</defs>
<g>
<rect fill="#009eff" height="100" width="300" class="color-fill"/>
<g transform="translate(200,30)">
<use xlink:href="#star1" class="glittering"/>
</g>
<g transform="translate(100,60)">
<use xlink:href="#star1" class="glittering"/>
</g>
</g>
</svg>
Updated copepen link here
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>