The SVG 1.1 standard says that the font-size attribute is allowed in text content elements. The <g> element is not a text content element. Conclusively, the <g font-size="45"/> is illegal.
However, many examples in the standard show <g>-elements with the font-size attribute.
Is the attribute allowed in <g> elements or are the examples showing invalid code?
font-size is an inherited CSS property so if you set it on a parent element, it applies to all that element's children.
It can have an indirect effect on non-text elements if they use em or ex units i.e. they are sized relative to the font-size. What the specification is trying (pretty poorly) to say is that setting a font-size on a rect element won't have any effect.
The specification for a g element is explicit that font-size is a property it supports. Click on the presentation-attributes link in the g element section on that page and the text will expand to show font-size as a supported attribute.
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'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
.i image,
.i path,
.i {
fill: red;
stroke: red;
margin-top: 5px;
}
<svg class="i">
<image class="i" xlink:href="https://nextgenthemes.com/wp-content/bubble.svg" height="100%" width="100%"/>
</svg>
It does work if I use the <use> element and reference a symbol from a svg definitions file.
jsbin
The SVG <image> element does not accept fill as an attribute. So it would not accept the CSS fill equivalent.
W3C SVG <image> element: http://www.w3.org/TR/SVG11/struct.html#ImageElement
Attribute definitions for the SVG <image> element :
x = The x-axis coordinate of one corner of the rectangular region into which the referenced document is placed.
If the attribute is not specified, the effect is as if a value of '0' were specified.
Animatable: yes.
y = The y-axis coordinate of one corner of the rectangular region into which the referenced document is placed.
If the attribute is not specified, the effect is as if a value of '0' were specified.
Animatable: yes.
width = The width of the rectangular region into which the referenced document is placed.
A negative value is an error (see Error processing). A value of zero disables rendering of the element.
Animatable: yes.
height = The height of the rectangular region into which the referenced document is placed.
A negative value is an error (see Error processing). A value of zero disables rendering of the element.
Animatable: yes.
xlink:href = A IRI reference.
Animatable: yes.
If it works with the SVG <use> element than use it!
What you want is not possible, for two different reasons.
SVGs loaded via HTML <img> or background-image, or via an SVG <image> can be considered as being rendered to a static form whose contents are not styleable by the parent. Think of it as having been converted to a bitmap.
CSS rules do not apply across document boundaries. You cannot have rules in one document (the HTML) that style elements in another document (in this case the SVG bubble.svg).
Is there a way to attach metadata directly to a grouping element () in an svg file? I couldn't find anything about that in the specification or elsewhere on the web, so I assume it's not possible. Perhaps there are other ways to attach element specific metadata within the svg file...
What I try to do is to create a map and attach information about adjacent countries.
Cheers.
As XML is extensible you can add attributes and element children as you wish. Here's a possible example:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:sol="http://www.sol.org">
<circle cx="10" cy="20" sol:country="ruritania" r="5"/>
</svg>
Here the svg and circle elements are in SVG namespace and sol:country is in your namespace. I believe that SVG user agents will ignore foreign namespaces. You could also use a metadata schem such as Dublin Core.
Alternatively you could use a desc element (http://www.w3.org/TR/SVG/struct.html#DescElement)
5.4 The 'desc' and 'title' elements
Each container element or graphics element in an SVG drawing can supply a 'desc' and/or a 'title' description string where the description is text-only. When the current SVG document fragment is rendered as SVG on visual media, 'desc' and 'title' elements are not rendered as part of the graphics. User agents may, however, for example, display the 'title' element as a tooltip, as the pointing device moves over particular elements. Alternate presentations are possible, both visual and aural, which display the 'desc' and 'title' elements but do not display 'path' elements or other graphics elements. This is readily achieved by using a different (perhaps user) style sheet. For deep hierarchies, and for following 'use' element references, it is sometimes desirable to allow the user to control how deep they drill down into descriptive text.