I have a handwritten signature to animate as if it is beeing written. I draw it into Illustrator as a path, but with the variable width tool I gave it a nice shape to look like it made by pen. I generated the svg code, but it made me a filled element with strokes, so I can only animate the stroke.
Is there a way to animate just the fill, or I can only animate stroke with equal width.
Or can I save svg some other way?
Related
I'm trying to animate the state of an element, by changing the svg background color.
To be more easy I try to interpolate an SCSS(Sass) variable #{$scss-variable} inside SVG.
Off course is not working, probabilly need some form of encoding before, so I'm looking for an scss function that can do this.
.span {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%
2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%
20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A#**#{$scss-variable}**%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M25
5.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%20
4.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c
3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A");
}
<span>aas</span>
I would Export the SVG via Illustrator after expanding it.
Here's an example of how to do that.
Once you create the SVG, you can then add it into your HTML by actually including the SVG element directly in the HTML or render it with an image tag (I usually put it directly into HTML).
The SVG is made up of vector shapes. These shapes are called either <circle>, <line>, <square>, or <paths>.
To change the color of the path, all you need to do is target it with CSS and change the fill property of the element. If you want to change the outside lining of the element you edit the stroke and stroke-width attributes.
If you want to animate the color changing, you can do this using keyframe animations as shown here.
I want to use an (external) SVG icon and want to be able to style the fill color using CSS (as far as I can see, the best way to do this is creating a <svg><use xlink:href="…" /></svg> structure at every place where I want to use it). Simultaneously I want it to be scalable with correct aspect ratio, so it can be used around different text sizes.
But scaling with height:1.5em;width:auto AFAICS only works when the SVG has a viewBox. Is there a way to obtain that viewBox or do the scaling correctly without it?
If your SVG editor doesn't add a viewBox, there is no easy way to get it - other than working out the dimensions yourself and adding it manually.
Use your mouse coordinates readout in your editor, or
Use javascript and call getBBox() on an appropriate element, or
Use trial and error. Fiddle with the x, y, width, and height iteratively until you narrow in on the dimensions.
It seems that generally a css clip-path is used to hide beginning at the edges of an element. I can use something like this:
clip-path:circle(70% at center);
and get something like this:
Is there a way I can invert that? I want my result to be something like this:
I want to clip the center of the image, not the edges. It's an SVG, so I tried something like this pen, animating a radial gradient: http://codepen.io/ethanclevenger91/pen/myMYwQ
But that didn't work like expected. There's the animated one and then one with what I assume the final step of the animation cycle should look like, but it doesn't. Any light on either of these would be appreciated.
You can use a still use a clipPath if you use it in its url form i.e. as svg markup. Draw the path outer rectangle clockwise and the inner ellipse (using two or more elliptical arcs) anticlockwise, drawing everything as a single path together with clip-rule="evenodd"
Alternatively you could use a <mask>. This is a simpler, but slower solution. Draw a white ellipse within the mask area and that part of the mask will be opaque.
So here's what ended up happening:
Since the background I was trying to match was a solid color, I gave the circles a stroke double their radius (since stroke is applied centered on the edge of the object) and then applied a clip-path the size of the object. Then I animated the stroke to 0. Will update with a link to the application when it's live.
I want to use Font Awesome icons in my application. Because every icon have to be rendered as the part of an existing SVG element, instead of using the webfonts I want to use the SVG paths.
Given that the design grid for SVG glyphs points upward, as explained here:
Extracting SVG from Font Awesome
I understand why they are appearing upside down, the question is, how to rotate them properly. The only solution I found so far was to rotate the icons programmatically before placing them to the canvas:
var icon = require('icons/fa-copy');
...
el.transform("r180"); //Raphael
my question is, how can I achieve the same with css, for example -webkit-transform?
Applying this transformation on the <path> element which is containing the SVG path the icon was rotated and translated to (0, 0).
EDIT
Note that this is about rotating SVG path elements, see this fiddle:
http://jsfiddle.net/NWXFn/
Is it possible to give SVG <tspan> element background color? If not, what would be the best way to simulate it?
My goal is to give text background color, and I figured that filling <tspan> elements would be perfect — they already "outline" text chunks (<tspan> elements) that represent lines in multiline text.
The example I'm working with:
<text x="100" y="100" font-size="30">
<tspan>hello</tspan>
<tspan x="100" dy="1.2em">world</tspan>
</text>
I tried "fill" attribute but it seems to affect fill (color) of text, not the area behind it:
<tspan fill="yellow">hello</tspan>
I also tried setting background-color via CSS:
<style type="text/css">tspan { background-color: yellow }</tspan>
..but that doesn't work (in at least Chrome 17 and Firefox 12).
Wrapping tspan in <g> (or text itself in <g>) with "fill" doesn't work either:
<g fill="yellow"><tspan>hello</tspan></g>
<tspan><g fill="yellow">hello</g></tspan>
Aside from creating a <rect> element positioned at the same location — something I'd like to avoid — is there another way to achieve this?
A rect is probably the best way to do that (assuming you are only dealing with the simplest forms of text).
The tspans have no "background" themselves in SVG 1.1, the background is whatever gets painted before the tspan. There are many cases to consider, such as the case where a tspan is inside a textPath that has the shape of a circle. Also note that it's not as simple as a continous rectangle in all cases, a single tspan can be skewed, rotated and partitioned into several intersecting and non-intersecting shapes due to transforms, glyph positioning, etc.
There's another way I can think of that would do this without scripting, but then you'd need to know the width of the string in advance (e.g by using a monospaced font). If you have that then you can add another tspan element using the Ahem font, placing it before the other tspan in the document and giving it the same x,y position as the tspan you want to give a "background".
Otherwise the way to do this is through scripting, and adding rectangles (or tspans with an Ahem-like font).
SVG does not support directly specifying an image background color...but you can adjust the four values of the viewBox attribute (complicated). I know it's something you want to avoid, but CSS wouldn't help you.
...or you can use getBBox and getCTM...it would give you advantages for rotated text.
EXAMPLE:
http://srufaculty.sru.edu/david.dailey/svg/getCTM.svg