I know I can use an inline <svg> element to load snap svg. However I would like to use an non-inlined file via an <img> element:
<img alt="comparison" src={arcStatic('/images/comparison.svg')} />
var diagram = Snap('img'),
group = diagram.select('#someGroup')
Where someGroup is an svg g element, fails. group is null.
Additionally:
console.log('diagram.constructor.name);
Shows this is an Element rather than a Snap instance.
How can I use snap.svg with external files?
Use the Paper.image function: http://snapsvg.io/docs/#Paper.image and put the images into the page with snap, so that you can access them.
Related
This question is similar, but the answer does not help.
The goal is to load an external SVG file (e.g., https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg), extract the SVG element, and append it to the HTML as an inline SVG element.
How can you do this?
We only want to use jQuery, no other third-party libraries.
If you have an svg element like this
<svg id="mySvgElement" width="100" height="100"></svg>
then, you can get an external svg file and put its content into your svg element like this:
$.get(externalSvgUrl, function(response){
var content = $(response).html();
$("#mySvgElement").html(content);
});
Say you have this in your HTML:
<img src='example.svg' />
How would you access the contents ( ie. <rect>, <circle>, <ellipse>, etc.. ) of the example.svg via JavaScript?
It's not possible to get the DOM of a referenced svg from the img element.
If you use <object>, <embed> or <iframe> however then you can use .contentDocument (preferred) to get the referenced svg, or .getSVGDocument which may be more compatible with old svg plugins.
Here's an example showing how to get the DOM of a referenced svg.
I'm pretty sure this isn't possible. The external SVG is not part of the DOM in the way an inline SVG is, and I don't believe you can access the SVG DOM tree from the loading document.
What you can do is load the SVG as XML, using an AJAX request, and insert it into the DOM as an inline SVG you can then walk and manipulate. This D3 example demonstrates the technique. I think the d3.xml() function used here is more or less equivalent to jQuery's $.ajax() with dataType: "xml".
No, not possible but you can convert <img> to <svg> as mentioned HERE (same code available below) and you can access the nodes of svg in the DOM.
<script type="text/javascript">
$(document).ready(function() {
$('#img').each(function(){
var img = $(this);
var image_uri = img.attr('src');
$.get(image_uri, function(data) {
var svg = $(data).find('svg');
svg.removeAttr('xmlns:a');
img.replaceWith(svg);
}, 'xml');
});
});
</script>
<img id='img' src="my.svg" />
If you are using inlining of SVG into CSS url(data:...) or just using url(*.svg) background, you can embed them into DOM with svg-embed.
Support Chrome 11+, Safari 5+, FireFox 4+ and IE9+.
If you’re using a back end language that can go fetch the file and insert it, at least you can clean up the authoring experience. Like:
<?php echo file_get_contents("kiwi.svg"); ?>
A little PHP-specific thing here… it was demonstrated to me that file_get_contents() is the correct function here, not include() or include_once() as I have used before. Specifically because SVG sometimes is exported with that as the opening line, which will cause the PHP parser to choke on it.
(Information taken out of CSS-tricks)
im having a problem highlighting states in map using jquery.i have implemented it using javascript. `
SVG Illustrator Test
<object data="map_with_hover.svg" type="image/svg+xml" id="alphasvg" width="100%" height="100%"></object>
<script>
var a = document.getElementById("alphasvg");
//it's important to add an load event listener to the object, as it will load the svg doc asynchronously
a.addEventListener("load",function(){
var svgDoc = a.contentDocument; //get the inner DOM of alpha.svg
var delta = svgDoc.getElementById("states"); //get the inner element by id
delta.addEventListener("mouseover",function(evt){ evt.target.setAttributeNS(null,"opacity","0.5");},false); //add behaviour
delta.addEventListener("mouseout",function(evt){ evt.target.setAttributeNS(null,"opacity","1");},false); //add behaviour
},false);
</script>
</body>
</html>
`
by this code states get highlighted easily but i want to do it in jquery as i also wanna add tooltip,so that on mouseover state name will also be displayed.
so basically i wanna know how to use SVG's id or class or tags to perfrom different action by using jquery.
There is a library called jQuery SVG this might help you.
You should embed the file directly into your HTML, (using SVG tags). This will allow you to select the different SVG elements using plain jQuery. See here
Feel free to use this code as it is very basic, and I pulled the map from Wikipedia.
I have an SVG file embedded into an HTML document inside . I can javascript access the elements in the html and svg using ids and classes. However, I want to perform some drag and drop on the embedded svg. I have been using the following example at http://svg-whiz.com/svg/DragAndDrop.svg separating the SVG from the javascript, but it gives me trouble when I embed the SVG in HTML. The init function in the SVG doesn't work when embedded
onload="initSVG(evt)"
I need to access the root of the SVG in the HTML so that I can get the drag and drop routines working. The original code for a standalone svg is written thus:
function initSVG(evt)
{
SVGDocument = evt.target.ownerDocument;
SVGRoot = SVGDocument.documentElement;
TrueCoords = SVGRoot.createSVGPoint();
GrabPoint = SVGRoot.createSVGPoint();
}
My rewrite is like such, so that it can be run without an onload event call:
function initSVG()
{
SVGRoot = document.getElementsByTagName("svg");
TrueCoords = SVGRoot.createSVGPoint();
GrabPoint = SVGRoot.createSVGPoint();
}
Which gives the the error: "Object # has no method 'CreateSVGPoint'". So it doesn't seem to be treating the imported SVG in the same way as a stand alone svg. How can I get the SVGRoot?
Thanks!
P.S. I know i should probably be using jquery, but I wanted to learn raw DOM.
The getElementsByTagName function returns a NodeList, not an element. Try:
SVGRoot = document.getElementsByTagName("svg")[0];
i'm using a library that creates svg content using raphael library. I would now like to add zooming functionality. I found following library:
http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/
This is how the svg part looks:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
//...the image
The issue is that this library expects a script tag and a g tag surrounding the whole image. It should look like this after manipulation:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<script xlink:href="SVGPan.js"/>
<g id="viewport" transform="translate(200,200)">
...//the image
</g>
I would need to add the script tag but the real problem is to put a g element with id="viewport" around the whole rest of the image.
How can i do that with JQuery or plan JavaScript?
EDIT:
I got a bit ahead of myself. It turns out that adding the script tag does not seem to work:
var svg = $('svg');
svg.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink'); // else error in firefox with links
var scriptElement = document.createElementNS('http://www.w3.org/2000/svg','script');
scriptElement.setAttribute('xlink:href','js/SVGPan.js');
svg.prepend(scriptElement);
I don't get an error and the script runs completely but the tag is not added. I have verified that $('svg') selects the desired element and I can do stuff with it except prepending the script tag for whatever resaon i do not understand.
I don't think Raphael allows you to manipulate the SVG element but you could try a similar Raphael-specific library. This one may provide what you are looking for: https://github.com/semiaddict/raphael-zpd
Edit: Actually it is possible to manipulate SVG elements: Raphael exposes a Node property. So if you could get hold of the Raphael paper object you could try something like:
paper.node.setAttribute("id", "viewport")
Thanks Clafou for pointing me to raphael-zpd. This lead me to the solution.
The issue is that I was able to get the raphael object but zpd only works if nothing has been drawn yet which is not the case.
I'm using http://www.jsphylosvg.com which makes use of raphael. The solution is to edit the javascript file jsphylosvg.js directly:
search for this.svg = Raphael(sDivId, this.canvasSize[0], this.canvasSize[1]); (line 1217 in my case)
add: this.svg.ZPD({ zoom: true, pan: true, drag: true }); directly below that line
save jsphylosvg.js
done. It works!
(Of course you need to have a reference to raphael-zpd in your web page)
Have you tried getting it via a jQuery selector? You could for example try setting the id on the child g element by doing this (after your library has constructed the SVG element):
$('svg > g').attr('id', 'viewport');