I'm creating an element that clips images with svg and css. Because I can't pass an entire svg as a property I added it as a slot in the template.
It works in firefox but I don't get why it isn't working in Chrome.
I can see that the element is being rendered as the last element inside the #img-container div on Chrome and on Firefox it is being rendered right below the iron-image element.
Please see this plunker example:https://embed.plnkr.co/mAtZQSTzxte1HuFFA8AB/
See the last example which displays the svg inside a slot.
Any ideas? Cheers!
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 an SVG file containing a number of xlinks that navigate to a different page. For example:
<a xlink:href="us/ak">...</a>
The SVG is a US map, and I'd be happy to provide it, but it's too big to include here.
When I try to use this SVG in an AMP page, the xlinks don't work. I see in the AMP spec that xlinks in an SVG are required to have a target URI starting with "#", so I think that's why my xlink isn't working. It behaves the same whether I use an amp-img or img tag.
It works fine if I put it in an img tag on a non-AMP page.
Is there a way to get my links to go to a new page, and not just to a #-link on the same page?
The color change on hover also stops working when I put the SVG on an AMP page, but I'm tackling one problem at a time.
If you just want to link to another page, <a href="..."> should work...
I have the following animation:
https://svgur.com/i/6XH.svg
If you click on the link, you will see that it starts playing once you hover it.
However, when I load the svg on a page using the image tag, as done below, the hover event doesn't seem to reach the svg image.
Is it possible to do this somehow? It is not an option to paste the svg directly in the html page, because the software I use don't allow for that.
Images by design do not expose a DOM and their content cannot receive mouse events; the target of the hover event is the <img> element itself. You can use an <object> or an <iframe> tag instead. The SVG is then inserted as a subdocument that users can interact with.
<object data="https://svgur.com/i/6XH.svg" width="322px" height="65px"></object>
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