SVG child elements that affect it's parent
NickName:W0lfw00ds Ask DateTime:2018-03-15T04:12:41

SVG child elements that affect it's parent

Many of elements' properties in SVG are usually declared as attributes or properties inside the element. F.ex width and height:

<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">

However, there are some properties that can be expressed as child elements. These child elements are placed directly inside the parent element they are affecting. One of these child elements is title:

<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>SVG Title Demo example</title>
    <rect x="10" y="10" width="200" height="50" />
  </g>
</svg>

In this case, the title applies to it's first parent, g.

Does there exist a list of all parent affecting child elements like this?

I need to know when to check element's children for additional definitions.

Copyright Notice:Content Author:「W0lfw00ds」,Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/49286877/svg-child-elements-that-affect-its-parent

More about “SVG child elements that affect it's parent” related questions

SVG child elements that affect it's parent

Many of elements' properties in SVG are usually declared as attributes or properties inside the element. F.ex width and height: &lt;svg width="500" height="300" xmlns="http://www.w3.org/2000/svg"&...

Show Detail

SVG Fill Width to Child Elements

I'd like my container SVG element to scale in order to fit its child group elements or for it to present scrollbars on overflow. I was wondering if there was a css property in order to do so. E.g....

Show Detail

How do I exclude a child element from an svg filter applied to the parent element, without changing the elements structure?

Z-index seem to have no effect either in this regard. I cannot add or remove elements, other than adding a pseudo element. The image is uploaded from the Wordpress backend, and it's changing in every

Show Detail

Which svg elements can be child, and which cant be

In html we say, the inline elements should be within the block elements. Similiarly, is there any rule that i can use, to find out which svg elements can be child, and which cant be.

Show Detail

having problems selecting svg child elements using d3

I have an svg that I'm trying to access and modify using d3.js. The svg file name is us-map.svg. I've included a reference to the svg in my html like this: &lt;object id="imgMap" data="us-map.svg"

Show Detail

JS and SVG. Getting child elements in a block by id

I have object block with svg file: &lt;object id="floor1_plan" type="image/svg+xml" data="map/map1.svg" height="100%" width="100%"&gt;&lt;/object&gt; Next I get conte

Show Detail

Finding XML (SVG) child elements

I have the following SVG &lt;g id="background"&gt; &lt;rect style="fill:#2A6683;" width="768" height="1024"/&gt; &lt;/g&gt; &lt;g id="wall"&gt;

Show Detail

Why can't svg scale to fit child elements?

I would an svg element which could scale to fit its children elements. Say you have: &lt;svg&gt; &lt;rect width=10 height=1000/&gt; &lt;svg&gt; It seems like there would be a way to get the s...

Show Detail

Unwanted SVGAnimatedString created along with SVG elements

My app uses a WebView to inject some HTML elements in the displayed HTML document. It can inject a SVG element (absolute position) with a polygon as a child. It sets the class attribute of the above

Show Detail

Why do the mouseenter/mouseleave events fire when entering/leaving child elements in an SVG?

I have an SVG, inside which there are more SVGs with a variable number of rect elements inside them, all generated from a data object. Here's the general hierarchy: &lt;svg class="parent-svg"&gt; ...

Show Detail