Whene i`m adding letter-spacing or word-spacing chrome flips rtl to ltr, and the letters\words are reversed.
here is a sandbox: https://codesandbox.io/s/f57mc?file=/src/App.js
<svg textAnchor="middle">
<text x="50" y="50" direction="rtl" writing-mode="rl"
letterSpacing="4">שלום</text>
</svg>
thank in advance for any help
Update
This is a known bug in the Chrome SVG renderer. The Chrome bug number is 973581.
See that bug report for more information.
Old answer
It's a definite bug. I think it's just a deficiency in the text shaping algorithm of Chrome. The bug doesn't seem to affect the HTML text shaping code (see below).
Please report the bug, as others have said. If you do, please add the bug number/link to this question for future reference.
<svg>
<text
x="0"
y="50"
letter-spacing="4"
>שלום</text>
</svg>
<p style="letter-spacing: 4px">שלום</p>
Related
I've searched all over the place and not have any success with this.
I'm making SVGs like the following one in order to make them scalable, and also help people who are dyslexic so they can highlight the text and use plugins like Read Out Loud:
https://www.ole.bris.ac.uk/bbcswebdav/institution/TEL/TEL%20guides/Published%20TEL%20guides/Replay/record-now-instructions-web.svg
But I've not been able to get my copy of NVDA to read out the tab-indexed fields as I tab through them. I've tried fields and aria-label on various things...
Is there something simple I can change so NVDA (and similar screen readers) will read out the text as I tab through (NVDA does this on HTML pages).
Or should I just put the full description of all the text in my description at the top?
I noticed you have role="img" in your svg root. That's borking everything, since it tells the accessibility API that it is just a single element, whose accessible name is always aria-labelledby="svgTitle svgDesc"
Try changing that to role="graphics-document" (or perhaps role="application" if you want fancier interactions) and I think you'll have a whole lot more luck.
The other option is to remove the role attribute from the <svg> element. It sounds counterintuative, but it should make any <text> elements accessible.
For an example, see tip 5 in this SitePoint article, which has great background and other helpful tips on making SVG more accessible in different use cases:
Tips for Creating Accessible SVG
From the above article:
<svg version="1.1" width="300" height="200" aria-labelledby="title desc">
<title id="title">Green rectangle</title>
<desc id="desc">A light green rectangle with rounded corners and a dark green border.</desc>
<rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
<text x="35" y="30" font-size="1em" text-anchor="middle" fill="#000000">Website</text>
</svg>
I'm trying to make an image unveil effect with an SVG mask, where a path with a quite complex geometry is scaled via CSS transforms:
clip-path: url(#aqua-dot-mask);
https://codepen.io/rberneder/pen/pojaNex
I tested the effect in Chrome, Firefox and Safari. The first two browsers are presenting what I want to achieve, but Safari has real troubles and glitches.
It seems Safari still has no full support of the clip-path property, but it should be capable of this particular one.
https://caniuse.com/#search=clip-path
Any ideas?
Thanks #Robert for your help. The solution I came up with is to just put the img tag as image tag into the SVG.
Instead of:
<img src="..." style="clip-path(#mask)" />
<svg>
<defs>
<clipPath id="mask">...</clipPath>
</defs>
</svg>
I now have:
<svg>
<defs>
<clipPath id="mask">...</clipPath>
</defs>
<image href="..." style="clip-path: url(#mask);" />
</svg>
https://codepen.io/rberneder/pen/xxwYmOj
This works for me.
I have been trying to get the cross browser compatability working of my svg project. I had a friend test my link on a mobile, but he sais the image doesn't load and he gets a black screen (I assume the black he refers too, is the rect in the background). Does anyone have any idea what is wrong with my code or why the image doesn't display properly on mobile?
svg
<svg viewbox="0 0 3000 2500">
<g transform="translate(225,50)">
<rect width="2550" height="1925" id="background-rect"></rect>
<image href="http://lorempixel.com/output/animals-q-c-640-480-3.jpg" width="2550" height="1925"></image>
</g>
</svg>
Example: https://codepen.io/RobMo/pen/aVvKEP
PS: Just an idea: It might have to do with me not declaring a namespace. I can't test it right now, but that might be what is causing this. Or maybe help people provide inspiration for an answer :).
PPS: To use the <img> tag you need to use xlink:href instead of just href. I should've decared the namespace in the svg tag as well.
What happens when you add a namespace?
<svg viewbox="0 0 3000 2500" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(225,50)">
<rect width="2550" height="1925" id="background-rect"></rect>
<image href="http://lorempixel.com/output/animals-q-c-640-480-3.jpg" width="2550" height="1925"></image>
</g>
</svg>
REF - https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image
I'm writing a web application which generates SVG images in the browser.
The SVG's I'm generating work fine in ever browser. However, when I download one of the SVG's and try to open it in Adobe Illsutrator, all the transformations are all over the place.
They are in fact so different that you have to zoom right out to see where the shapes are positioned.
This is the contents of the SVG, you can see it's pretty simple. Just a couple of nested SVG's and a few basic shapes:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="592" height="592" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg style="overflow:visible;" x="88.80000305175781" y="88.80000305175781" fill="#777777">
<svg style="overflow:visible;" height="100px" width="100px">
<rect width="100" height="100" style="stroke:#006600;" transform="scale(4.144 4.144)"></rect>
</svg>
</svg>
<svg style="overflow:visible;" width="592" height="592" x="176.60000000000016" y="177.60000000000014" fill="#000000">
<rect width="592" height="592" fill="rgba(0,0,0,0)" stroke="#bbbbbb" transform="scale(0.4 0.4)"></rect>
<svg style="overflow:visible;" x="-0.0000015258789005656581" y="-0.0000015258789005656581">
<svg style="overflow:visible;" height="48px" width="48px">
<ellipse id="SvgjsEllipse1010" rx="24" ry="24" cx="24" cy="24" style="stroke:#006600;fill:#00cc00;" transform="scale(4.933333333333334 4.933333333333334)"></ellipse>
</svg>
</svg>
</svg>
</svg>
I don't know the SVG spec inside out, but I'm doing anything particularly complex, so it all seems good to me. I can't see a reason why Illustrator would render it so differently to browsers.
Does anyone know why this is happening?
Edit
This is what it looks like in Illsutrator, as you can see the scaling and positioning is all off, the small square in the center is the 592 x 592 canvas area, so you can see who far I am zoomed out.
I suspect AI doesn't like/handle/expect nested <svg> elements. Try replacing them with groups. Those with x and y attributes may need to have a transform added to get it to look the same. Also if the overflow is important, you may need to tweak things further as that property is not valid for group elements.
I'd like to embed an external SVG image file within an <svg> tag. To do this, i'm using SVG's <image> tag as follows:
<svg width="1000" height="1000"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="48" height="48"
xlink:href="http://static.micahcarrick.com/media/images/autotools-tutorial/hello-world.svg"
transform="scale(5.0)" />
</svg>
As you can see, I'm trying to scale the nested SVG by 5.0 by adding a transform attribute. Unfortunately, in both Firefox and Chrome, I'm sometimes getting a blury image because it's rasterizing the nested SVG before scaling it up.
Note: It sometimes works as expected (The nested SVG stays crisp) in Firefox and Chrome, but not always (For example, if I open the attached JSFiddle in Chrome, it's blury/broken. If I press F5, it's crisp/working)
Is there any way to ensure that the nested SVG is never rasterized before scaling ?
Thanks :)
JSFiddle: http://jsfiddle.net/a9NRY/17/
This is a known bug in Chrome, caused by the fact that the image is cached. You can't fix this from your code, since it's a browser bug, but you could try to disable caching for that image on the server side.