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.
Related
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.
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)
The ondragover="functioname(event), ondragstart="functioname(event) and ondrop="functioname(event) are used inside HTML tags. I want to separate JS from HTML, but I can't find how to do so and if there will be some performance impact(I want to use native HTML5 drag'n'drop).
Thanks!
Add an id to your element and then try to retrieve them using that id and then add event listeners to them.
HTML:
<div id="myDiv"></div>
JAVASCRIPT:
var myDiv = document.getElementById("myDiv");
myDiv.ondragover = functionname;
// ...
There are plenty of ways to handle events in web pages.
- Using attributes like you has shown
- Using js objects and methods
You want the second options, aren't you?
You may try to write your own code (see api descriptions here https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) or use third-party libs for that purpose (https://github.com/bevacqua/dragula, http://interactjs.io/, so on).
I have an svg graphics inserted in the page with an embed or object tag:
<object data="graphics.svg" type="image/svg+xml" id="graphics" />
The image is loading properly and I can see its SVG structure with the browser debugger. I see all the elements ids and attributes but it seems to me there is no way to select those elements with my scripts on page:
$('#graphics path').length; // 0 (jQuery)
$('path').length; // 0 anyway
Is it possible to browse the graphics elements as usual?
It will show up as a separate document, similar to an iframe. You can access it like this:
var svg = document.getElementById('graphics').contentDocument
Note that it is important to wait until the svg file is loaded; you might want to put your code in the object element’s onload event handler, like this:
<object data="graphics.svg" type="image/svg+xml" id="graphics" />
<script>
document.getElementById('graphics').addEventListener('load',function(){
var svg = document.getElementById('graphics').contentDocument
// do stuff, call functions, etc.
})
</script>
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];