I'm trying to use CSS transisions with SVG <use> element.
The problem is that the transition works with the original element but not inside the element on adding/removing class through classList.
However when I disable the transform property in the browser tools, it works.
Can someone help with this?
The small element is the source element which works, The bigger one is using <use>
https://codepen.io/karanS/pen/GqVLGv
Related
What is the difference between using a svg (nested inside the svg) and a g element?
Both of these can be used to group together elements into one unit. When should I use a nested svg element and when should I go for a g element?
Also there is the symbol element that does not render, then you refer to use it using the use element, but you can also put the code inside the defs element instead of using a symbol element. So what is the difference between symbol and having the code in defs and when should I use either one and how do I know under when to use which?
Element
Type
Visibility
Notable attributes
svg
Container, structural
Renders
preserveAspectRatio, viewBox, zoomAndPan
g
Container, structural
Renders
transform
defs
Container, structural
Invisible, use its children with the use element
transform
symbol
Container, structural
Invisible, use with the use element
preserveAspectRatio, viewBox
use
Graphics, referencing, structural
Renders, refers to another element
transform
I am looking for a way to determine the actual value of attributes such as fill or stroke of elements contained in an SVG (path, circle, ...). I know of several ways to parse an SVG and access direct element attributes, but I can't find an easy way to determine the value of an attribute as it will be displayed taking into account cascading styles and xlink:href references.
The method window.getComputedStyle applied to the element does exactly that!
I have some of the elements under SVG.
I am trying to access them using CSS selector:
cy.get('element selector').click(), it says:
unable to find the element using that selector.
But, with the same selector I am able to identify element in the browser using chropath.
Please help me.
Latest version of ChroPath 6.0 supports the svg elements and svg child elements. Just inspect the svg elements or click on svg DOM node, ChroPath will generate the relative xpath for them.
I am new to svg, as far as I saw everywhere they using svg elements within g tag, is there any particular reason for using svg elements within g tag other than applying transformation for whole set of elements?
That's a pretty important and useful reason. But other reasons you might do it are so you can:
apply the same styling (eg. fill="blue") to a set of elements,
reference to the group of objects from a use.
Not to mention the simple organisational reasons.
http://tutorials.jenkov.com/svg/g-element.html says:
The <g> element is used to group SVG shapes together. Once grouped you can transform the whole group of shapes as if it was a single shape. This is an advantage compared to a nested <svg> element which cannot be the target of transformation by itself.
I am using RaphaelJS for a project that requires vector drawing for visualization of some data.
I am not able to figure out how to push and pop transformation states.
(equivalent of context.save() and context.restore() in html5 canvas)
Can someone point me in the right direction?
thanks.
Could you explain why you need to push and pop transformation state?
In svg you don't really need to do that, the browsers do it for you. If you want a particular transform to apply to an element then just add a transform attribute to it. You can make a transform apply to many elements by using <g> elements (in Raphaël there's Paper.set, which can be used like a <g> element, and you have the Element.transform method to set the transforms).
Update:
context.save() - in svg terms this would be to take the current transformation matrix (CTM) of the element at a given time and storing it somewhere, in Raphaël I guess this might be Element.transform() (I'm not 100% sure if it includes whole stack of transformations or not, anyway, in pure svg the CTM can be fetched via the getCTM() method which is available on all elements). One way of doing this would be to insert a <g> element with the transformation you want.
context.restore() - in svg this would be equivalent to removing a transformation from the list of transforms, but note that in svg siblings don't "inherit" the transformation (this is unlike html5 canvas or OpenGL where the currently set matrix is just applied to anything you draw after setting the transform). If you want a transform to apply to many elements then you create a <g> which has the transformation that should apply to all the children of that element, and to restore you just insert elements to the parent of the <g> instead. Raphaël doesn't have any built-in support for the <g> element (unless you count Element.set, which is a similar concept), a guess for why Raphaël does this is that it's to prevent people from trying to do things like this since it becomes very easy to bloat the DOM without realizing it (remember, SVG is a retained mode graphics format, unlike canvas and OpenGL).