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.
Related
I'm trying to show a svg icon on html page with pug syntax, but doesn't work
This is the code
span.icon
svg(width="24px", height="24px")
use(xlink:href="../../../images/svg/glass.svg")
The <use> element cannot link to complete files, only to named fragments. There is a proposal to change this in the future, but for now, the root <svg> element in file glass.svg needs to have an id, lets say id="glassRoot". Then you can do
span.icon
svg(width="24px", height="24px")
use(xlink:href="../../../images/svg/glass.svg#glassRoot")
Add id="glassRoot" -> (#glassRoot) after glass.svg.
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!
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'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?