why text-outline not work in my svg? - svg
whenever i use text-outline or stroke in style. it's not work. how i can give text-outline to my text(SVG TEXT) in text tag.
<div class="slides2">
<img class="" src="//cdn.shopify.com/s/files/1/0797/1743/products/HK-CK_28785899-10b3-4f49-88be-975a69089e52_1024x1024.JPG?v=1464803870">
<div class="custom">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="410" height="70" viewBox="0 0 2326 460">
<defs>
<clipPath id="my-path">
<text id="texty" style="font-weight:bold;text-outline: 2px 2px #ff0000;" x="60" y="300" font-size="350">SVG TEXT</text>
</clipPath>
</defs>
<image xlink:href="Mother of Pearl.JPG" clip-path="url(#my-path)" width="100%" height="100%" id="filler" preserveAspectRatio="none"></image>
</svg>
</div>
</div>
Anything you include in a <clipPath> is used only to form the clipping path. It is never rendered.
If you want it to also be rendered, then you will need to include it again as a separate object.
<div class="slides2">
<img class="" src="//cdn.shopify.com/s/files/1/0797/1743/products/HK-CK_28785899-10b3-4f49-88be-975a69089e52_1024x1024.JPG?v=1464803870">
<div class="custom">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="410" height="70" viewBox="0 0 2326 460">
<defs>
<clipPath id="my-path">
<text id="texty" style="font-weight:bold;" x="60" y="300" font-size="350">SVG TEXT</text>
</clipPath>
</defs>
<image xlink:href="Mother of Pearl.JPG" clip-path="url(#my-path)" width="100%" height="100%" id="filler" preserveAspectRatio="none"></image>
<text id="texty" style="font-weight:bold; stroke: #f00; stroke-width: 2;" x="60" y="300" font-size="350">SVG TEXT</text>
</svg>
</div>
</div>
Related
SVGs in menu getting cut off/cropped incorrectly
After spending hours looking into similar issues I still haven't found a solution that works. I have some SVGs that are rendering fine normally, but when they're placed in the <nav> parts are cut off. I have noticed that the issue seems to occur only when multiple SVG icons are used in the nav. So if, for example, I remove the first <li> item in its entirety the remaining SVGs seem to not have the problem of being cut off.
I've set up a codepen here with the same code below: https://codepen.io/lsg-alex/pen/oNgVLbq
<nav id="site-navigation" class="main-navigation">
<div class="menu-main-container">
<ul id="menu-main">
<li>
<a href="#"
><!--?xml version="1.0" encoding="UTF-8"?-->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 12.1 18.1"
width="12.1"
height="18.1"
>
<defs>
<style>
.cls-1,
.cls-4 {
fill: none;
}
.cls-2 {
clip-path: url(#clip-path);
}
.cls-3 {
fill: #58585b;
}
.cls-4 {
stroke: #58585b;
stroke-linecap: square;
stroke-linejoin: round;
stroke-width: 0.5px;
}
</style>
<clipPath id="clip-path">
<rect class="cls-1" width="12.1" height="18.1"></rect>
</clipPath>
</defs>
<title>icon-archive</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<g class="cls-2">
<path
class="cls-3"
d="M7.85,17.05H1.05v-14h10v10.8M9,1.15v1.1H4.24Zm.35-.9-8.71,2H.61a.42.42,0,0,0-.36.4v14.8a.41.41,0,0,0,.4.4H8.29a.31.31,0,0,0,.24-.12l3.25-3.25a.39.39,0,0,0,.07-.31V2.65a.41.41,0,0,0-.4-.4H9.83V.65A.43.43,0,0,0,9.38.25Z"
></path>
<path
class="cls-4"
d="M7.85,17.05H1.05v-14h10v10.8M9,1.15v1.1H4.24Zm.35-.9-8.71,2H.61a.42.42,0,0,0-.36.4v14.8a.41.41,0,0,0,.4.4H8.29a.31.31,0,0,0,.24-.12l3.25-3.25a.39.39,0,0,0,.07-.31V2.65a.41.41,0,0,0-.4-.4H9.83V.65A.43.43,0,0,0,9.38.25Z"
></path>
</g>
</g>
</g>
</svg>
<span class="menu-item__text">Archive</span></a
>
</li>
<li>
<a href="#"
><!--?xml version="1.0" encoding="UTF-8"?-->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 16.24 17.78"
width="16.24"
height="17.78"
>
<defs>
<style>
.cls-1 {
fill: none;
}
.cls-2 {
clip-path: url(#clip-path);
}
.cls-3 {
fill: #58585b;
}
</style>
<clipPath id="clip-path">
<rect class="cls-1" width="16.24" height="17.78"></rect>
</clipPath>
</defs>
<title>icon-topics</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<g class="cls-2">
<path
class="cls-3"
d="M5.24,10.35,6.23,8a.42.42,0,0,1,.39-.26h3.72a.44.44,0,0,1,.43.43.36.36,0,0,1-.06.2l-1,2.36a.42.42,0,0,1-.39.26H5.61a.44.44,0,0,1-.43-.43.36.36,0,0,1,.06-.2M8,.56,5.63,6.23a.43.43,0,0,1-.39.26H.61a.62.62,0,0,0,0,1.23H4.36a.43.43,0,0,1,.42.43.35.35,0,0,1,0,.2l-1,2.36a.42.42,0,0,1-.4.26H.61a.62.62,0,0,0,0,1.23H2.46a.43.43,0,0,1,.43.43.46.46,0,0,1-.05.2L1.11,16.93a.62.62,0,0,0,1.14.48l2.09-4.94a.42.42,0,0,1,.39-.26H8.44a.43.43,0,0,1,.43.43.46.46,0,0,1,0,.2L7.16,16.77a.62.62,0,0,0,1.15.46l2-4.76a.42.42,0,0,1,.39-.26h4.92a.6.6,0,0,0,.43-.18.61.61,0,0,0-.43-1h-4a.43.43,0,0,1-.42-.43.35.35,0,0,1,.05-.2l1-2.36a.42.42,0,0,1,.4-.26h3a.62.62,0,0,0,0-1.23H13.49a.43.43,0,0,1-.43-.43.46.46,0,0,1,0-.2l2.11-5A.62.62,0,0,0,14.08.38L11.61,6.23a.42.42,0,0,1-.39.26H7.51a.43.43,0,0,1-.43-.43.46.46,0,0,1,0-.2L9.18,1A.62.62,0,0,0,8,.56"
></path>
</g>
</g>
</g>
</svg>
<span class="menu-item__text">Topics</span></a
>
</li>
<li>
<a href="#"
><!--?xml version="1.0" encoding="UTF-8"?-->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 16.72 16.14"
width="16.72"
height="16.14"
>
<defs>
<style>
.cls-1 {
fill: none;
}
.cls-2 {
clip-path: url(#clip-path);
}
.cls-3 {
fill: #58585b;
}
</style>
<clipPath id="clip-path" transform="translate(0 0)">
<rect class="cls-1" width="16.72" height="16.14"></rect>
</clipPath>
</defs>
<title>icon-search</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<g class="cls-2">
<path
class="cls-3"
d="M9.84,11c-2.75-.13-4.75-2.1-4.65-4.57A4.6,4.6,0,0,1,10,2.06a4.58,4.58,0,0,1,4.52,4.63A4.57,4.57,0,0,1,9.84,11m-5.55-.57c-.86.81-3,3-3.86,3.81a1,1,0,0,0-.15,1.5,1.07,1.07,0,0,0,1.6,0c.87-.82,3.05-3.08,3.89-3.89,4.1,2.38,7.81,1,9.71-1.56a6.37,6.37,0,0,0-.8-8.44,7,7,0,0,0-9.06-.47,6.43,6.43,0,0,0-1.33,9"
transform="translate(0 0)"
></path>
</g>
</g>
</g>
</svg>
<span class="menu-item__text">Search</span></a
>
</li>
</ul>
</div>
</nav>
I tried adjusting the viewBox settings, height/width on the SVGs themselves as well as through CSS, setting overflow to visible, using a .svg inside an tag, etc. but none of these seem to have any impact. When I pull one of the SVGs that's cut off outside of the nav and paste the code above it, for example, it renders properly.
I can't help but feel like there's something obvious here I'm overlooking, and any help would be really appreciated.
This line is your culprit, remove them (or at least this first one since it's the one effecting the ones below it) and voila; <clipPath id="clip-path"> <rect class="cls-1" width="12.1" height="18.1"></rect> </clipPath> Then to keep it clean, remove the references to it in the CSS such as; clip-path: url(#clip-path); I'm going to assume these were generated with something and you didn't intend on needing a specified clip-path anyway. Cheers!
Shadow Root? Calling out stroke color
I am calling out a stroke in an SVG, it works if I don't put any class on the style. But I need to put it there because needed to be fixable for the end user to pick any color they want.
symbol#icon-arrow{
stroke: #ff6600;
} /*this is working*/
.icon-orange symbol#icon-arrow{
stroke: #99CA3D;
} /*this is not working, but this is what I need*/
<div id="icon-load" style="display:none;"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<symbol id="icon-arrow" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="square" stroke-linejoin="arcs" >
<path class="arrow" d="M12 19V6M5 12l7-7 7 7"/>
</symbol>
</svg>
<a href="#" class="icon">
<svg class="icon icon-orange"><use xlink:href="#icon-arrow"></use></svg>
</a>
As #enxaneta said, you have to style the <use> element, and let the colour percolate down to the symbol.
But you'll first need to remove the stroke attribute from the symbol. Otherwise that presentation attribute will override the colour you want it to inherit.
.icon-orange use {
stroke: #ff6600;
}
.icon-green use {
stroke: #99CA3D;
}
<div id="icon-load" style="display:none;"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<symbol id="icon-arrow" viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="square" stroke-linejoin="arcs" >
<path class="arrow" d="M12 19V6M5 12l7-7 7 7"/>
</symbol>
</svg>
<a href="#" class="icon">
<svg class="icon icon-orange"><use xlink:href="#icon-arrow"></use></svg>
</a>
<a href="#" class="icon">
<svg class="icon icon-green"><use xlink:href="#icon-arrow"></use></svg>
</a>
Inside the .icon-orange there is a <use> element. You have to style the use element. However if you need to refer the #icon-arrow here is how you can do it:
/*declare the namespace xlink*/
#namespace xlink "http://www.w3.org/1999/xlink";
/*style the use element inside the icon-orange whose's xlink:herf attribute is the icon arrow*/
.icon-orange use[xlink|href ="#icon-arrow" ]{
stroke: #99CA3D;
}
<div id="icon-load" style="display:none;"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<symbol id="icon-arrow" viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="square" stroke-linejoin="arcs" >
<path class="arrow" d="M12 19V6M5 12l7-7 7 7"/>
</symbol>
</svg>
<a href="#" class="icon">
<svg class="icon icon-orange"><use xlink:href="#icon-arrow" width="24" height="24"></use></svg>
</a>
SVG + Handlebars - Rotating a graphic and adjusting proportions
I'm trying to rotate a graphic within a svg but i'm having the hardest time.
Below image is what I'm trying to achieve, a rotated version by switching the original width with the height but keeping all original proportions
I've tried rotating the individual object and rotating the full on but nothing comes even remotely close to the end result. the screenshot below comes from my front end webpage, the backend unfortunately needs an svg to print labels in the correct location.
let me know if anything else is needed to be able to troubleshoot this
Screenshot of how it would look coming out of your printer:
Desired End Result (badges to wear on your person):
Handlebars template:
<svg id="svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="{{paper.width}}{{paper.unit}}" height="{{paper.height}}{{paper.unit}}" viewBox="0 0 {{paper.width}} {{paper.height}}">
{{#each papers}}
<g transform="translate({{leftOffset}}, {{topOffset}})">
{{#each badges}}
<!--Badge {{#index}}-->
<g transform="translate({{leftOffset}}, {{topOffset}})">
<svg width="{{width}}" height="{{height}}" viewBox="0 0 {{width}} {{height}}">
{{#each objects}}
{{#if placeholder}}
<!--Text: {{placeholder}}-->
<svg x="{{x}}" y="{{y}}" width="{{width}}" height="{{height}}">
<text x="{{leftOffset}}" y="{{topOffset}}" text-anchor="{{alignment}}" font-size="{{fontSize}}" font-family="{{fontName}}" font-weight="{{fontWeight}}" font-style="{{fontStyle}}" fill="{{fontColor}}" transform="rotate({{rotation}} {{rotationX}} {{rotationY}})">
{{value}}
</text>
</svg>
{{else}}
{{#if background}}
<!--Background: {{name}}-->
{{else}}
{{#if isDropdown}}
<!--Image: {{value}}-->
{{else}}
{{#if file}}
<!--Image: Uploaded - {{cid}}-->
{{else}}
<!--Image: {{name}}-->
{{/if}}
{{/if}}
{{/if}}
<svg preserveAspectRatio="{{aspectRatio}}" x="{{leftOffset}}" y="{{topOffset}}" width="{{width}}" height="{{height}}" viewBox="0 0 {{backWidth}} {{backHeight}}">
<image xlink:href="{{href}}" x="0" y="0" width="100%" height="100%" transform="rotate({{rotation}} {{rotationX}} {{rotationY}})"/>
</svg>
{{/if}}
{{/each}}
</svg>
</g>
{{/each}}
</g>
{{/each}}
<defs>
<style type="text/css">
{{#each googleFonts}}
<link xmlns="http://www.w3.org/1999/xhtml" href="{{url}}" rel="stylesheet" type="text/css" />
{{/each}}
{{#each fonts}}
{{fontFace}}
{{/each}}
</style>
</defs>
</svg>
Completed example:
<svg id="svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="8.267in" height="11.692in" viewBox="0 0 8.267 11.692">
<g transform="translate(0.27906, 1.62367)">
<!--Badge 0-->
<g transform="translate(0, 0)">
<svg width="3.8548" height="2.1114" viewBox="0 0 3.8548 2.1114">
<!--Image: belgian-flag(2).jpg-->
<svg preserveAspectRatio="none" x="1.2888000000000002" y="0.172" width="0.4915" height="0.4988" viewBox="0 0 226 400">
<image xlink:href="https://i.imgur.com/QLTDr7J.jpg;" x="0" y="0" width="100%" height="100%" transform="rotate(90 200 113)"/>
</svg>
<!--Image: Albania.png-->
<svg preserveAspectRatio="xMidYMid meet" x="2.3009999999999997" y="0.2335" width="0.5038" height="0.5036" viewBox="0 0 48 48">
<image xlink:href="https://i.imgur.com/gFbTCmq.png;" x="0" y="0" width="100%" height="100%" transform="rotate(90 24 24)"/>
</svg>
<!--Text: Name-->
<svg x="1.5157" y="0.2712" width="2.0202" height="0.48227999999999993">
<text x="2.1817" y="0.3122" text-anchor="end" font-size="0.2225" font-family="Arial" font-weight="400" font-style="normal" fill="#000000" transform="rotate(90 1.0101 0.24113999999999997)">
DFGHDFGH
</text>
</svg>
<!--Text: Title-->
<svg x="1.5526" y="1.2349" width="2.0202" height="0.47652">
<text x="1.2227999999999999" y="0.2818833333333333" text-anchor="end" font-size="0.16666666666666666" font-family="Arial" font-weight="400" font-style="italic" fill="#000000" transform="rotate(90 1.0101 0.23826)">
dfghdgh
</text>
</svg>
</svg>
</g>
<!--Badge 1-->
<g transform="translate(3.8548, 0)">
<svg width="3.8548" height="2.1114" viewBox="0 0 3.8548 2.1114">
<!--Image: belgian-flag(2).jpg-->
<svg preserveAspectRatio="none" x="0.4193" y="1.3148" width="0.4924" height="0.5027" viewBox="0 0 400 226">
<image xlink:href="https://i.imgur.com/QLTDr7J.jpg;" x="0" y="0" width="100%" height="100%" transform="rotate(0 113 200)"/>
</svg>
<!--Image: Albania.png-->
<svg preserveAspectRatio="xMidYMid meet" x="0.4808" y="0.3016" width="0.5078" height="0.5027" viewBox="0 0 48 48">
<image xlink:href="https://i.imgur.com/gFbTCmq.png;" x="0" y="0" width="100%" height="100%" transform="rotate(0 24 24)"/>
</svg>
<!--Text: Name-->
<svg x="1.5119" y="0.2707" width="2.02212" height="0.48263999999999996">
<text x="1.6851" y="0.3261" text-anchor="end" font-size="0.25" font-family="Arial" font-weight="400" font-style="normal" fill="#000000" transform="rotate(0 1.01106 0.24131999999999998)">
DFGHDF
</text>
</svg>
<!--Text: Title-->
<svg x="1.5504" y="1.2375" width="2.02212" height="0.4732799999999999">
<text x="1.6851" y="0.2805333333333333" text-anchor="end" font-size="0.16666666666666666" font-family="Arial" font-weight="400" font-style="italic" fill="#000000" transform="rotate(0 1.01106 0.23663999999999996)">
ghdfghdfgh
</text>
</svg>
</svg>
</g>
</g>
<defs>
<style type="text/css">
#font-face {
font-family: '
Arial'
;
src: url('file:///G:/Work/NPGC/assets/fonts/Arial.ttf') format('
truetype'
);
}
</style>
</defs>
</svg>
I am not the least sure I have understood what you mean when you say "keeping all original proportions". My interpretation is that you refer to percentages of the badge width/height. The best way to write this is to rotate not the individual components, but the badge as a whole: Define one badge in landscape proportions, and the other in portrait proportions. Set respective width, height and viewBox for both. The content elements get identical attributes for both variants: x and y for all of them, and width and height for the images all get percentage values. The portrait badge is then rotated and translated so that it sits below the landscape badge. <svg xmlns="http://www.w3.org/2000/svg" width="8.267in" height="11.692in" viewBox="0 0 8.267 11.692"> <!-- landscape mode --> <svg width="3.8548" height="2.1114" viewBox="0 0 3.8548 2.1114"> <image xlink:href="https://i.imgur.com/gFbTCmq.png;" x="8%" y="25%" width="15%" height="15%" preserveAspectRatio="xMidYMid meet"/> <image xlink:href="https://i.imgur.com/QLTDr7J.jpg;" x="8%" y="63%" width="15%" height="12%" preserveAspectRatio="none"/> <text x="88%" y="30%" text-anchor="end" font-size="0.25" font-family="Arial" font-weight="400" font-style="normal" fill="#000000">My Name</text> <text x="88%" y="70%" text-anchor="end" font-size="0.25" font-family="Arial" font-weight="400" font-style="normal" fill="#000000">My Title</text> </svg> <!-- portrait mode --> <svg height="3.8548" width="2.1114" viewBox="0 0 2.1114 3.8548" transform="translate(0 4.2228) rotate(-90)"> <image xlink:href="https://i.imgur.com/gFbTCmq.png;" x="8%" y="25%" width="15%" height="15%" preserveAspectRatio="xMidYMid meet"/> <image xlink:href="https://i.imgur.com/QLTDr7J.jpg;" x="8%" y="63%" width="15%" height="12%" preserveAspectRatio="none"/> <text x="88%" y="30%" text-anchor="end" font-size="0.25" font-family="Arial" font-weight="400" font-style="normal" fill="#000000">My Name</text> <text x="88%" y="70%" text-anchor="end" font-size="0.25" font-family="Arial" font-weight="400" font-style="normal" fill="#000000">My Title</text> </svg> </svg> I've rotated the portrait variant counter-clockwise. If that is a problem, the clockwise transform would read transform="translate(3.8548 2.1114) rotate(90)" For the template part, you only need to differentiate between the badge dimensions. All internal dimensions stay the same for both badges.
Position SVG item relative to text
This is my code: <?xml version="1.0"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" viewBox="0 0 100 30" version="1.1"> <text id="t1" x="50%" y="50%" text-anchor="middle">Hello World</text> <g transform="translate(0,0) rotate(0)"> <rect x="0" y="0" width="10" height="10" fill="blue" /> </g> </svg> This gives me hello world and a rectangle. I would like to know how to position my rectangle relative to my text. I thought this would do the trick, but according to my code above the rectangle should sit on top of the text but it does not. Edit: I tried this but it didn't change anything: <?xml version="1.0"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" viewBox="0 0 100 30" version="1.1"> <g transform="translate(0,0) rotate(0)"> <rect x="0" y="0" width="10" height="10" fill="blue" /> </g> <text id="t1" x="50%" y="50%" text-anchor="middle">Hello World</text> </svg>
Is this close to what you want? <svg width="100%" height="100%" viewBox="0 0 100 30" version="1.1"> <rect x="0" y="0" width="100%" height="100%" fill="blue" /> <text id="t1" x="50%" y="50%" text-anchor="middle" dy="0.3em">Hello World</text> </svg> The correct value to use for dy, to get the text vertically centred, is font specific. You may have to tweak that value to match whichever font you choose. In my opinion, it is a more reliable alternative to other solutions like alignment-baseline etc.
Another Approach you can try! Maybe It will fit for you ...
p {
font-size: 42px;
}
p>svg {
width: 60px;
height: 60px;
display: inline-block;
position: relative;
top: 28px;
}
<div style="display:none">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol viewBox="0 0 20 20" id="box">
<g transform="translate(0,0) rotate(0)">
<rect x="0" y="0" width="12" height="12" fill="blue" />
</g>
</symbol>
</svg>
</div>
<p>
<svg>
<use xlink:href="#box"></use>
</svg> Hello World
</p>
How to make JAWS read texts in a SVG graph in a significant order
I was trying to add accessibility to my chart based on SVG. I added id and aria-labelledby attributes to map the labels and values: <svg width="400" height="200" tabindex="0"> <g class="subjects"> <text id="subject1">Maths</text> <text id="subject2">Physics</text> <text id="subject3">English</text> <text id="subject4">Chemistry</text> </g> <g class="marks"> <text aria-labelledby="subject1">90%</text> <text aria-labelledby="subject2">85%</text> <text aria-labelledby="subject3">80%</text> <text aria-labelledby="subject4">95%</text> </g> </svg> But the screen reader (JAWS) is reading out in sequence: Maths Physics English Chemistry 90% 85% 80% 95% I want the screen reader to read: Maths 90% Physics 85% English 80% Chemistry 95%
So firstly let me say that SVG accessibility is an emerging area of accessibility and so these techniques may only work on a subset of browsers), that having been said, you could get better accessibility now on the supporting browsers by doing this (caveat - tested only on OS X with Safari):
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="400px" height="200px" viewBox="0 0 400 200" tabindex="0">
<g class="subjects">
<text y="25" aria-label="Maths 90%">Maths</text>
<text y="75" aria-label="Physics 85%">Physics</text>
<text y="125" aria-label="English 80%">English</text>
<text y="175" aria-label="Chemistry 95%">Chemistry</text>
</g>
<g class="marks" aria-hidden="true">
<text x="100" y="25">90%</text>
<text x="100" y="75">85%</text>
<text x="100" y="125">80%</text>
<text x="100" y="175">95%</text>
</g>
</svg>
The following will work on more browsers e.g. IE on Windows and Safari on OS X
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="400px" height="200px" viewBox="0 0 400 200" tabindex="0" aria-labelledby="svgDesc">
<title id="svgDesc">
Maths 90%, Physics 85%, English 80%, Chemistry 95%
</title>
<g class="subjects" aria-hidden="true">
<text y="25">Maths</text>
<text y="75">Physics</text>
<text y="125">English</text>
<text y="175">Chemistry</text>
</g>
<g class="marks" aria-hidden="true">
<text x="100" y="25">90%</text>
<text x="100" y="75">85%</text>
<text x="100" y="125">80%</text>
<text x="100" y="175">95%</text>
</g>
</svg>
In order to get something to work everywhere as of the writing of this answer, you have to rely on essentially treating the SVG as an image and providing an alternative as a text description as shown above in the second example, or hiding the entire thing with aria-hidden="true" and providing an "off-screen" alternative such as a table or alternative HTML presentation. The example below will work everywhere for and provide real semantic markup that equals the visual display.
<!doctype html>
<html>
<head>
<style>
.screen-reader-text {
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px);
}
</style>
</head>
<body>
<table class="screen-reader-text">
<tr>
<th scope="col">Subject</th>
<th scope="col">Percentage</th>
</tr>
<tr>
<th scope="row">Maths</th>
<td scope="col">90%</td>
</tr>
<tr>
<th scope="row">Physics</th>
<td scope="col">85%</td>
</tr>
<tr>
<th scope="row">English</th>
<td scope="col">80%</td>
</tr>
<tr>
<th scope="row">Chemistry</th>
<td scope="col">95%</td>
</tr>
</table>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="400px" height="200px" viewBox="0 0 400 200" aria-hidden="true">
<g class="subjects">
<text y="25">Maths</text>
<text y="75">Physics</text>
<text y="125">English</text>
<text y="175">Chemistry</text>
</g>
<g class="marks">
<text x="100" y="25">90%</text>
<text x="100" y="75">85%</text>
<text x="100" y="125">80%</text>
<text x="100" y="175">95%</text>
</g>
</svg>
</body>
</html>
Maybe exploit the fact that "labelledby" will accept multiple ids. added roles and title element. This seems to read as desired: <svg width="400" height="200" tabindex="0" role="img" aria-labelledby="chart-title subject1 val1 subject2 val2 subject3 val3 subject4 val4"> <title id="chart-title">Student's grades for quarter:</title> <g class="subjects" role="presentation"> <text id="subject1">Maths</text> <text id="subject2">Physics</text> <text id="subject3">English</text> <text id="subject4">Chemistry</text> </g> <g id="marks" role="presentation"> <text id="val1">90%</text> <text id="val2">85%</text> <text id="val3">80%</text> <text id="val4">95%</text> </g> </svg>