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
Related
I have attached a jsfiddle sample where the SVG works fine but when I add it to my angular html both circles are appearing at different places.
<svg class="circle-chart" viewbox="0 0 33.83098862 33.83098862" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle class="circle-chart__background" stroke="#efefef" stroke-width="2" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
<circle class="circle-chart__circle" stroke="#00acc1" stroke-width="2" stroke-dasharray="30,100" stroke-linecap="round" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
</svg>
working example https://jsfiddle.net/7104bgz3/
Angular example - where it's not working https://stackblitz.com/edit/angular-sq1dwb
How to make it work exactly like jsfiddle example?
Any help would be appreciated!
The problem is in the viewBox attribute: in the second example you wrote viewbox (lowercase b)
That attribute is case sensitive and a typo doesn't properly create the dimension (and coordinates) of the SVG viewport.
As a side note, I voted to close this question, because the problem is due to a typo.
Background
I have a set of SVG icons that all have drop shadows. To make this work in Chrome, I can't just use filter:drop-shadow. I have to use filter:url(#drop-shadow), and define the drop shadow in my <defs> section.
I also have multiple instances of these icons on the page (they are filetype icons in a list of files), so I am using <use> to keep my page DRY.
Code
Exernal SVG File
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<filter id="drop-shadow">
<feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="SourceAlpha" stdDeviation="4"/>
..... more filter lines, shortened for brevity
</filter>
</defs>
<symbol id="download-pdf">
<path filter="url(#drop-shadow)" d="" fill="">...</path>
</symbol>
<symbol id="download-zip">
..... another icon
</symbol>
... more icons
</svg>
Inline SVG on the Page
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="URL_OF_EXTERNAL_SVG"></use>
</svg>
See minimal working example here: http://h.andymercer.net/chrome-svg-bug/
Problem
The problem is that Chrome isn't finding the #drop-shadow link, and so is breaking the icons. Firefox, conversely, displays the icons perfectly.
Firefox:
Chrome:
If you notice, the Chrome screenshot DOES show some portion of the icon. It is displaying the portions that don't use the drop shadow filter.
I can't figure out why this is, because the drop shadow is in the <defs> that is on the same page as the <symbol>.
Question
Is there something I am missing, or is this a Chrome bug?
Edit
Per comments, I was asked for a MCVE. I hadn't done that because the problem inherently requires external URLs, which is typically frowned upon here. However, to demonstrate the problem, take a look at this:
http://h.andymercer.net/chrome-svg-bug/
In Firefox, you can see the icon. In Chrome, it is blank.
In Chrome, <defs> must be located inside the same <svg>.
In your case:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<filter id="drop-shadow">
<feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="SourceAlpha" stdDeviation="4"/>
</filter>
</defs>
<symbol id="download-pdf">
<path filter="url(#drop-shadow)" d="" fill="">...</path>
</symbol>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download-pdf"></use>
</svg>
Conforming to modern browsers capabilities, it's easier and cleaner to create different external svg files, one for each icon, then embed them using <object> or <img> tags.
<object> lets javascript access and modify SVG code via DOM, while <img> embed SVGs denying DOM access to them. So, in your case using <img> should be a better choice.
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
Please I want to know how to make something similar to sunrise using css3.
Below is a sample.
This article (though it talks about animating the rays also) decribes making a suburst pattern http://designrshub.com/2013/01/css3-keyframe-animations.html.
But, I would use an svg image. See Is Starburst effect doable in CSS3?
the SVG:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="512px" height="512px" viewBox="-256 -256 512 512"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Burst</title>
<defs>
<g id="burst">
<g id="quad">
<path id="ray" d="M0,0 -69,-500 69,-500 z" />
<use xlink:href="#ray" transform="rotate(30)"/>
<use xlink:href="#ray" transform="rotate(60)"/>
<use xlink:href="#ray" transform="rotate(90)"/>
</g>
<use xlink:href="#quad" transform="rotate(120)"/>
<use xlink:href="#quad" transform="rotate(240)"/>
</g>
<radialGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="white" stop-opacity="0.65"/>
<stop offset="100%" stop-color="black" stop-opacity="0.65"/>
</radialGradient>
<!-- a circle mask -->
<mask id="m"><circle r="256" fill="white"/></mask>
</defs>
<!-- added a mask and scaled it to a different aspect ratio below. scale(x,y) -->
<g mask="url(#m)" transform="scale(1, 0.75)">
<use xlink:href="#burst" fill="lightslateblue"/>
<use xlink:href="#burst" fill="darkslateblue" transform="rotate(15)"/>
<circle r="360px" fill="url(#grad)" />
</g>
</svg>
Yes, it is possible.
Working demo: https://codepen.io/lethargic/full/RRYdxX
I've written a vanilla CSS version as well as a Sass mixin at github.com/pestbarn/starburst.css.
Cross-browser?
As far as I can tell, yes. Needs testing in IE versions below 11, but seems well supported otherwise (full browser support as of 2019).
Animatable?
Yep, like you would animate any other elements.
Caveats?
Alas, there is. Using colors that are far from another on the color wheel will create jagged edges. I'd recommend using colors that are close to one another.
Also, since the effect is created using pseudo elements, you will in some cases need to explicitly set the element's height and width.
Using the Sass mixin, you can simply do the following:
#include starburst(both, 11, #184256, #194052);
This will create a starburst/sunburst effect with the colors you asked for, with the bursts being 11 degrees apart (smaller number = tighter burst).
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>