I'm having a hard time finding some precise information on the browser support for the <use> element to include inline SVGs. There is a Can I Use page on SVG fragment identifiers, but as I understand this is only for the <view> element. Any idea?
Related
I'm using the foreignObject tag inside an SVG, which is working on Chrome, however, it isn't working on Safari. I have gone through about 20 solutions, but the issue persists.
One of the solutions was a user mistyping foreignObject, they instead wrote it as foreignobject (lowercase "O").
In my code, foreignObject is spelled with the correct casing, however, in Safari's devtools, I notice that the tag is spelled foreignobject!
(Below, Safari devtools screenshot, and my code screenshot)
I'm sure this is what is causing the issue I'm having, but it makes no sense, since I have it written correctly in the code, but it's misread when Safari builds the site.
Is there any precedence for something like this? What can I do to change this misreading of my element tag name?
The problem is that you are setting the xmlns attribute of your <foreignObject> to the XHTML name-space. Safari will thus consider it an HTML element when the SVG document is served as a standalone (if it was served inline in an HTML document, then they'd discard it.
This attribute must be set on the top HTML element, that is on the <foreignObject> content:
<foreignObject
requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
width="300"
height="100"
>
<html-elem xmlns="http://www.w3.org/1999/xhtml">...
(Note that when served inline in an HTML document, Safari's web-dev tools will also show this element lower-cased, even though it will work correctly).
I have some of the elements under SVG.
I am trying to access them using CSS selector:
cy.get('element selector').click(), it says:
unable to find the element using that selector.
But, with the same selector I am able to identify element in the browser using chropath.
Please help me.
Latest version of ChroPath 6.0 supports the svg elements and svg child elements. Just inspect the svg elements or click on svg DOM node, ChroPath will generate the relative xpath for them.
I need to fetch a lot of SVG documents from AWS and I use vue.js to render the content of the SVG. This works fine in Chrome, Firefox, Edge and Safari but fails without errors in IE11.
I have created jsFiddle to illustrate my issue: https://jsfiddle.net/dotnetCarpenter/pp7bcLkk/
The raw SVG file can be viewed here and is rendered in IE11: https://napp-siesta-test.s3-eu-west-1.amazonaws.com/siesta-demo-mwqxbrqx/uploads/1506688653629/viewer/472.svg
Since I need to set v-show and class on the SVG, I have a <svg> container in my template that I add the SVG string to via v-html.
I strip the <svg> element from the received SVG document and also resolve the relative paths to fonts, since I'm in-lining the SVG.
As discussed in this issue v-html uses innerHTML which has no effect on SVG element in IE.
Luckily in VueJS 2.6 there was a workaround added.
So for you there are two possible fixes: upgrade VueJS version or use custom render function and construct VNodes for SVG content manually.
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 made the following observation:
If I create an svg image that references an external raster image via xlink:href and try to load the svg in browsers, the external images are only shown if I use the <object> tag, but not when using the <img> tag.
Rendering with the <object> tag is quite slow and not as clean as using the img tag for images so I was wondering if there's a way to make it work through the <img> tag.
At first I thought it doesn't work because of a same origin policy, but even if the referenced image is in the same directory and I reference it through its name only, it wont load.
Any ideas?
Are you using IE? IE doesnt recognize SVG anyway. Microsoft is always ten years behind, yet they are more popular and far more costly, for some reason. Name brand propaganda?
SVG loads in Firefox. Both as an XML document referenced directly in the URL, and also if you embed it into an XHTML (fully XML compliant) document with proper namespacing, the SVG should render properly. The great thing about this option is that DHTML can manipulate your SVG. Everything I said in this paragraph also applies to MathML, if youre curious.
Aside from that, SVG doesn't load from an image tag. I do believe Firefox is working on this upgrade, though. Im not entirely sure.
Using the object or embed tag is reasonable, I suppose... but one of my earlier fixes was to use an iframe. Embed an iframe in your html that references the complete SVG file. Using CSS you can make the iframe look flush with the rest of your document, appearing and acting like an image. Encased in a div or span tag, you can have onhover and onclick event handlers.
Using the image tag, your src can be a PHP file on server side. If properly coded and with the appropriate cgi apps, you can rasterize your SVG on server-side, and have that PNG data sent back to your image via the PHP src.
There's no particular reason <object> should be any slower to load than <img> apart from possibly the interaction aspect (img's are static while object's are fully interactive documents). The images inside the svg should load in both scenarios, so it sounds like a bug in the browser.
Could you post a link to your example?
I think you are at least 10 months behind...IE9 supports SVG, and pre-release versions (including a beta) have been out for quite a while. Check out www.ietestdrive.com to grab the platform preview - it's pretty good. In my opinion, parts of their SVG support are much better than Firefox currently (but they don't support SMIL yet).