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 :)
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.
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/
What is the HTML CSS solution for highlighting specific areas of a map/floor plan like this?
http://www.centrecourtshopping.co.uk/store-info/
They use sprite image look here.
Basically, it works like that:
The map with dark-blue regions is completely static.
There is invisible layer on top of it made from small rectangular in their case <a> -- each corresponds to single dark-blue region and posses its its own id.
When cursor is placed over a rectangular with id x the sprite image is nicely aligned with its background (by setting CSS's background-position).
Do not think, this magic would be possible without using JavaScript.
I have a world map image. I would like to place a SQUARE GRID over the entire map. I would like each square (cell grid) to change via mouseover with a border color change and background color change.
The grid needs to be layered over the map, transparent except the borders (which is the grid).
Can I achieve this using CSS or there a better way to do this?
Many thanks.
Erik
I'd suggest using a CSS grid framework as an easy way to produce the grid layout. I'd go for this one as you can easily use create a grid with 0px gutters.
You will need to modify the CSS to make the grid absolute positioned so it sits over the top of your map.
Each element in the grid is a DIV so you can easily attach Javascript events to each one to allow users to control the map. If it's a simple colour change on hover then just use css.
You can make the grid transparent using css too: http://css-tricks.com/css-transparency-settings-for-all-broswers/