SVG:TEXT attributes accessing in Javascript - text

I have the HTML elements like the following:
<svg width="930" height="450">
<g transform="translate(.5,.5)">
<g class="cell" transform="translate(758.6842105263157,0)">
<text x="85.65789473684211" y="225" dy=".35em" id="text-Summer" text-anchor="middle" style="display: block;">Summer</text>
</g>
<g class="cell" transform="translate(758.6842105263157,0)">
<text x="85.65789473684211" y="225" dy=".35em" id="text-Winter" text-anchor="middle" style="display: block;">Winter</text>
</g>
</g>
</svg>
How can I get the "id" of the svg:text element which is having the text content "Summer" in Javscript.
I tried accessing using
$("svg g text[text='Summer']").attr('id').
But it is not getting.


Sorry, but what for do you need this? Can't you just generate id and text at one time and then get the element with $("svg g text#text-Summer")?


You should use something like this:
$("svg g text:contains(Summer)").attr('id')
It means that your selector is not correct.

Related

SVG text accessibility

I have the following structure
<h2>
<svg viewBox='-5 -40 100 50'>
<!-- some filters that get applied on the elements below -->
<clipPath id='c'>
<text id='t'>Scooby</text>
</clipPath>
<g clip-path='url(#c)'>
<rect x='-5' y='-40' width='100%' height='100%'/>
<path/>
</g>
<use xlink:href='#t'/>
<use xlink:href='#t'/>
</svg>
</h2>
How can I ensure the text inside the clipPath ("Scooby") gets seen by screen readers and only once?
I know SVG text should be read by screen readers, but is that the still the case when it's inside a clipPath element? And what about use copies of it?
I'm using this structure in order to get some fancy effects (think stuff like this) on the heading text (and ditch the .jpg image that's currently used).

Remove the SVG from your screenreader using aria-hidden and define the label for your h2 using aria-labelledby.
<h2 aria-labelledby="t">
<svg viewBox='-5 -40 100 50' aria-hidden="true">
<!-- some filters that get applied on the elements below -->
<clipPath id='c'>
<text id='t'>Scooby</text>
</clipPath>
<g clip-path='url(#c)'>
<rect x='-5' y='-40' width='100%' height='100%'/>
<path/>
</g>
<use xlink:href='#t'/>
<use xlink:href='#t'/>
</svg>
</h2>

Add aria-hidden to suppress screen reading on specific elements, it'll read "Scooby" just once:
<h2>
<svg viewBox='-5 -40 100 50'>
<!-- some filters that get applied on the elements below -->
<clipPath id='c'>
<text id='t'>Scooby</text>
</clipPath>
<g clip-path='url(#c)'>
<rect x='-5' y='-40' width='100%' height='100%'/>
<path/>
</g>
<use aria-hidden="true" xlink:href='#t'/>
<use aria-hidden="true" xlink:href='#t'/>
</svg>
</h2>

The aria-label attribute is intended for use when text is not visible on screen
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
<h2 aria-label="Scooby">
<svg> ... </svg>
<h2>
or alternatively, I believe most screen readers will use the <title> SVG element.
<h2>
<svg>
<title>Scooby logo</title>
...
</svg>
<h2>
You also have the option of using other ARIA attributes, such as aria-labelledby.

using leaflet-react how can I control the svg output of `<geojson>`

I am currently using <GeoJSON> to display a featureCollection of polygons on a map. This outputs svg similar to:
<svg>
<g>
<path...></path>
<path...></path>
<path...></path>
<path...></path>
</g>
</svg>
Each of my geojson features comes out as a path - but we would like to be able to control the rendering of the features to be able to wrap them in a group and also include an icon and some text, such as:
<svg>
<g class="group">
<g class="status">
<path...></path>
<image x="" y="" xlink:href="image.png"></image>
<text x="" y="">
...
</text>
</g>
<g class="status">
<path...></path>
<image x="" y="" xlink:href="image.png"></image>
<text x="" y="">
...
</text>
</g>
<g class="status">
<path...></path>
<image x="" y="" xlink:href="image.png"></image>
<text x="" y="">
...
</text>
</g>
</g>
</svg>
I am very new to leaflet in general and leaflet-react even more so - ive looked through the documentation but I am probably not looking for the right terms. Do I maybe need to use something besides <GeoJSON>? Thanks for any help and let me know if I can expand on anything.

transform property not working in IE on <use> in svg image when svg image importing from external html file

index.html
<div class="button-icon">
<svg width="950px" height="605px" viewBox="0 0 950 605" >
<use xlink:href="assets/svgs/front-view-1-g2.svg#front-view-1-g2" />
</svg>
</div>
front-view-1-g2.svg
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
<g id="dark-rectangle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" >
<text id="2" font-family="AvenirPrimaryHMHMath" font-size="10" width="12" height="12" font-weight="normal" fill="#000000">
<tspan x="83" y="15">31</tspan>
</text>
<rect id="path-1" transform="translate(83.000000, 17.000000)" x="0" y="0" width="12" height="12" fill="#9b9b9b" ></rect>
</g>
</defs>
<g id="iPad" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="front-view-1-g2">
<use xlink:href="#dark-rectangle"></use>
<use transform="translate(110.000000, 0.000000)" xlink:href="#dark-rectangle"></use>
</g>
</g>
</svg>
i have only one group but needed to call it 2 times and change the position of second group and that is why i used transform to second use tag but its not working in IE browser.
if i put use tag in html file then also transform not working in IE.
it works properly in Chrome and Mozilla.
Note : use tag not working when mentioned in .svg file and transform not working when use mentioned in .html file.

Hey I found the answer for this.
Transform will work on use tag in IE as IE will not render tag, it directly renders particular group's child elements from .svg file.
In above case of mine, I need to create another rectangle group assign transform to it and use that group.

Iframe renders outside foreignobject tag within svg

see underneath code. the iframe content renders outside the box, how can I fix this? Thanks in advance
<svg class=imac viewBox="0 0 4182 3461" xmlns="http://www.w3.org/2000/svg"><g id="Mac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="iMac-27-inches" sketch:type="MSArtboardGroup" transform="translate(-409.000000, -270.000000)">
<g sketch:type="MSLayerGroup" transform="translate(409.000000, 270.000000)">
<g id="Body" transform="translate(0.000000, 2489.000000)" sketch:type="MSShapeGroup">
<path d="M1577.64,971.42 C1505.81,971.42 1459.903,966.251 1455.929,955.691 L1455.929,941.928 L2726.059,941.928 L2726.059,955.691 C2722.085,966.251 2676.178,971.42 2604.348,971.42 L1577.638,971.42 L1577.64,971.42 Z" id="Leg-Front" fill="#D5D2CF"></path>
<path d="M1575.87,959.63 C1517.429,959.63 1456.947,956.394 1455.935,941.935 C1466.604,920.26 1602.695,849.688 1620.41,817.781 C1646.689,783.33 1664.504,545.619 1676.143,389.447 L1676.143,385.515 L2505.859,385.515 L2505.859,389.447 C2517.498,545.619 2535.313,783.33 2561.592,817.781 C2579.307,849.688 2715.398,920.26 2726.067,941.935 C2725.055,956.394 2664.573,959.63 2606.132,959.63 L1575.872,959.63 L1575.87,959.63 Z" id="Leg" fill="#C3C3C3"></path>
<path d="M4182,0.14 L0,0.14 L0,290.438 C0,345.077 44.36,389.438 99,389.438 L4083,389.438 C4137.64,389.438 4182,345.077 4182,290.438 L4182,0.14 L4182,0.14 Z" id="Body1" fill="#D5D2CF"></path>
</g>
<g id="Screen" fill="#343434" sketch:type="MSShapeGroup">
<path d="M4182,99 C4182,44.36 4137.64,0 4083,0 L99,0 C44.36,0 0,44.36 0,99 L0,2493.08 L4182,2493.08 L4182,99 L4182,99 Z" id="Black-Frame"></path>
<path d="M4015.5,164.974 C4015.5,163.319 4014.156,161.974 4012.5,161.974 L169.5,161.974 C167.844,161.974 166.5,163.319 166.5,164.974 L166.5,2327.974 C166.5,2329.63 167.844,2330.974 169.5,2330.974 L4012.5,2330.974 C4014.156,2330.974 4015.5,2329.63 4015.5,2327.974 L4015.5,164.974 L4015.5,164.974 Z" id="Screen-Frame"></path>
<rect id="Screen1" x="171" y="166.5" width="3840" height="2160"></rect>
<foreignObject x="171" y="166.5" width="3840" height="2160">
<iframe xmlns="http://www.w3.org/1999/xhtml" src="http://test.nl" style="width: 100%; height: 100%;"></iframe>
</foreignObject>
</g>
<circle id="Camera" fill="#3E3E3E" sketch:type="MSShapeGroup" cx="2091" cy="68.815" r="17.695"></circle>
</g>
</g>
</svg>
see Example (image)
Iframe is on the right place within the svg. However, it's content just offsets down and to the right. Besides that, the width and height set to the iframe (which also are OK according to the svg), are not honored by the iframe content...
UPDATE:
I found out that when I use test.nl as src of the iframe, the iframe content is misplaced. However, when I use another link, such as 123test.nl then I get the iframe to render correctly. So, what could be wrong with the home script of test.nl to cause this render problem?
Any ideas?

If you attempt to place your Iframe at the centre of the foreignObject it's convenient to specify the same width="3840" and height="2160" as the foreignObject,

How to bind text to svg rect?

The following code infact wraps text on a rectangle.
But when I want to drag the rectangle, i also want the text to be dragged simultaneously,i.e, the text must be bound to the rectangle on drag and drop.
Please help me.
<svg xmlns="http://www.w3.org/2000/svg">
<g id='Propositions'>
<rect id='Proposition1' x='50' y='50' width='100' height='30' style='fill:#8FBC8F; '/>
<text x="55" y="72" font-family="Verdana" font-size="14" fill="black" > Proposition1</text>
</g>
</svg>
Thanks in advance..

Drag the <g> element(parentNode), rather than the rect. This, then will include the text in the drag/drop event.
e.g.
<g id='Propositions'>
<rect id='Proposition1' onmousemove=dragMe(evt) x='50' y='50' width='100' height='30' style='fill:#8FBC8F; '/>
<text pointer-events=all x="55" y="72" font-family="Verdana" font-size="14" fill="black" > Proposition1</text>
</g>
function dragMe(evt)
{
myG=evt.target.parentNode
myG.setAttribute("transform", "translate("+transX+" "+transY+")")
}

Resources