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/
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.
Can I nest regular elements inside a svg element? For example; my svg will be a triangular outer container and I want input, label, etc. elements inside the SVG.
Maybe I should use clip to create the triangle instead?
According the to SVG standard you can't add an input nor label inside an SVG element.
There are 14 functional areas or feature sets, which are:
Paths
Basic shapes
Text
Painting
Color
Gradients and patterns
Clipping, masking and compositing
Filter effects
Interactivity
Linking
Scripting
Animation
Fonts
Metadata
And those are not one of them :)
I have two images link.
Original image -
Masking image -
Here is the result image.
How can i get the result like this?
I was finding some way using css - clip-path : rect(....) but I can't find
using image mask.
Make sure that the mask is a .png, where the grey part is transparent. Then, use it in the following way:
CSS: img{background-image: url('original_image');}
HTML: <img src="mask.png"/>
See an example here: http://codepen.io/anon/pen/pjOwpe
You might want to use some of the CSS background properties to align the original image in such a way that the correct part of it is shown (see http://www.w3schools.com/cssref/pr_background-position.asp)
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?
I created new sprite image using Instant Sprite, sprite_main.png and replaced old sprite image created by SpritMe, spriteme1.png.
I just changed image path and used given background positions only but the result is disappointing with sprite_main.png. I don't understand what happen but is that because I added another 20+ icons to the sprite image?
http://fiddle.jshell.net/6TaQt/40/
Background positions result is disappointing with sprite_main.png because sprite_main.png's height are different with (higher than) spriteme1.png's height and have defferent position for each icons between both images. So, you must re-calculate top background position.
Here my revision background position for sprite_main.png : http://fiddle.jshell.net/Vrf7g/