This question already has answers here:
Selenium WebDriver: clicking on elements within an SVG using XPath
(8 answers)
Closed 1 year ago.
On this page there is a chart.
Here I can only locate the chart boundaries element //div[#data-chart_id='product_cannabinoids'] however I'm not able to locate the rect, svg or g elements inside it.
I see all these elements in the F12 but nothing like //div[#data-chart_id='product_cannabinoids']//svg or //div[#data-chart_id='product_cannabinoids']//rect gives any much.
I guess it's some kind of JavaScript dynamic elements, but still, these are not pseudo elements. They are looking like regular elements!
So why this happens and how can we locate these elements with Selenium?
XPATH requires a different way of finding 'svg' and 'rect' elements,
using this syntax will work -
//*[local-name() = 'svg']
this is caused because 'svg' and 'rect' use different XML namespaces.
An alternative is using css selectors, css works normally with all type of elements.
From my understanding, SVG elements aren't the same as normal elements and can be a little tricky.
Check out this response:
Selenium WebDriver: clicking on elements within an SVG using XPath
Related
I have been searching for months now about this subject, but I can't find anything about it. What I'm looking for: I have sheetmusic on my screen, which is xml converted to svg with javascript. Now I want to make buttons with which I can manipulate the SVG that's displayed on the screen. For example: the music has lyrics underneath the notes and chords above it. Let's say I want to replace or remove them with an onclick button. All this temporarily, only on the screen.
I am currently working on a similar project. You have 2 approaches:
Directly modify SVG (hmmm not cool if you have complex objects)
Find out which SVG element is to be modified, find the corresponding id
in the XML structure, modify the XML node, "recompile" XML to SVG.
As a more performant way, you may compile only the node that changed and
then insert it in the SVG.
In order to select the element you want to apply an action on, you can set
a 'click' event listener on each selectable element.
This question already has an answer here:
Generated SVG image doesn't display
(1 answer)
Closed 7 years ago.
I'm trying to add a feature to a webtoy I built. It uses raw javascript and SVG. The app has a bunch of functionality and is over a year old and lives at http://stereosketcher.com. My new feature is supposed to add an SVG <image> to a <g> when I drag an image file onto a special spot on the screen from the file system. I have the dragging and parsing and appending all done, but my image isn't appearing. It isn't that it isn't in the markup, it is in the markup, it's just that I can't see the image.
I would suspect some kind of layering or opacity issue or something, except that there are two weird tricks I can do to make the image appear:
Just copy the whole <image> element (xlink:href and all) into somebody else's SVG editor (like the 'try it' editor over at W3Schools)
Use Firebug to manually edit the markup and simply touch the last few characters of the <image> inserting a space or a carriage-return before the "/>" closing tag (removing the new character does not make the image disappear again)
The function to add it to the document looks like this:
function applyImageToFaces(data) {
var image = document.createElementNS("http://www.w3.org/2000/svg", "image");
image.setAttribute("width","800");
image.setAttribute("height","800");
image.setAttribute("xlink:href",data);
shapeGroup.appendChild(image);
}
Does anybody know what kind of behavior that is?
EDIT: It look like even when I replace 'data' with a plain link like this:
<image width="800" height="800" xlink:href="http://thumbs.ebaystatic.com/d/l225/m/m-EuLTQ6AWFEafDhXz9cujA.jpg"/>
It behaves in exactly the same way....
Welp. I found my answer: https://stackoverflow.com/a/26634735/2427417
I had tried that before but I had left out the "http://" from the namespace because I was copying it from the comment on this answer: https://stackoverflow.com/a/12423019/2427417
While I have found variations of this question I have not found a solution for my problem.
For the sake of brevity I have the following structure...
<svg>
<g>
<rect></rect>
<rect></rect>
<rect></rect>
</g>
</svg>
I can animate these rect elements by adding a use element beneath the rect elements within the group.
However, if I try to dynamically create a use element with animation rules to insert after the rect elements and inside the group, the animation does not take place.
When reviewing in Chrome Dev Tools, I can see that the dynamically created elements are there, but the animation is not taking place.
I have tested in FF and Chrome, and neither work.
I have read that this may be a Chrome bug, but most of the threads that I read were older, and am not sure if a solution has been found yet.
When I am creating my elements I am using createElementNS.
I have tried adding the FakeSmile library even though this seems to be IE specific.
I am only using JavaScript, no jQuery.
If I am not making myself clear, here is the desired result: http://codepen.io/JoeyCinAZ/pen/Hstkr
and here is the non-functioning example: http://codepen.io/JoeyCinAZ/pen/GHhbw
You are creating the <use> element with createElement when you need to use createElementNS to create the element in the SVG namespace.
Also you're trying to set the xlink attribute using setAttribute when you must use setAttributeNS to set it in the xlink namespace.
I've got some elements in the DOM that are being made visible by some javascript, but I can't find what javascript is affecting those elements? Like you can use firebug/chrome to find out what css is affecting the elements.
Is this even possible?
There's no way to find out which js code made changes on an element in the past.
To find out events connected to DOM elements you can use http://www.sprymedia.co.uk/article/Visual+Event
Webkit allows the use of an external SVG file as a mask for any HTML element. Ie:
<img src="kate.png" style="-webkit-mask-image: url(circle.svg)">
Resulting in:
(More information here: http://webkit.org/blog/181/css-masks/)
Does anyone know if there's a way to do it without an external SVG file? More specifically, can it be done with SVG generated from javascript?
Well, two years have passed since I asked this question and the browser landscape changed a lot. Here's an example of exactly what I wanted to do, which works only in Firefox for now: http://mozilla.seanmartell.com/persona/
As you can see there's a div with id chameleon which has the following style:
<div id="chameleon" style="clip-path:url(#clip1); -webkit-mask-box-image: url(mask.png);">
#clip1 points to a clipPath element inside an inline SVG element which links to a shape.
<clipPath id="clip1"><use xlink:href="#shape1"/></clipPath>
So now it's doable in Firefox.
Thanks #mart3ll for the practical example!
I'm not sure about the WebKit specific extension but Mozilla allow you to apply SVG effects like masks and filters on HTML elements. These can be defined in external files or directly in the markup. See this post. This isn't in any spec at the moment, but the SVG and CSS working groups are working together to spec this approach. See the Working Group's page (although only filters, not masks are mentioned explicitly there).
You can usually link to something in SVG by including the id of the element in the url value (e.g. url(#someID)). You could try generating the SVG via JS, giving it an id and inject it into the document and see if it works. There is no spec as it is a WebKit extension so it is hard to say without trying it out.
Yes I believe it's possible. Recently I used PHP to generate the SVG file.
Here is an example that I made:
http://jsfiddle.net/brokeneye/ygsKm/
Also check out http://raphaeljs.com/