How to add SVGPan support to raphael - javascript
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');
Related
How can I use snap.svg with external files?
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.
Load external .svg with JavaScript new Image() and then change its content [duplicate]
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)
How do I test a click on SVG objects using Selenium webdriver?
I am trying to write a code to check the functionality of a click on an SVG object - for example a US state on this URL http://www.amcharts.com/svg-maps/?map=usa This works, but is there a better way to do this? Something without physically moving the mouse? robert = new Robot(); robert.mouseMove(x, y); // full click once to get focus on the window robert.mousePress(MouseEvent.BUTTON1_MASK); robert.mouseRelease(MouseEvent.BUTTON1_MASK); // then set the filter robert.mousePress(MouseEvent.BUTTON1_MASK); robert.mouseMove(x, y); robert.mouseRelease(MouseEvent.BUTTON1_MASK);
In SVG, everything displayed is a block defined by coordinates. In your case, every state is a block as well and therefore has an XPath which you will be able to use in your Selenium code. Use your browser developement tool to analyse the code of the page and find which block corresponds to the state you want to click on. Here is the element corresponding to California. <path cs="100,100" d="M371.75,174.28l-1.09,4.03l-1.09,4.03l-1.09,4.03l-1.09,4.03l-1.09,4.03l-1.09,4.03l-1.09,4.03l-1.09,4.02l-1.09,4.03l-1.09,4.02l-1.09,4.02l-1.09,4.02l-1.09,4.02l-1.09,4.02l-1.09,4.02l-1.09,4.02l2.98,4.56l3,4.56l3.02,4.56l3.05,4.55l3.07,4.54l3.09,4.54l3.11,4.53l3.13,4.53l2.41,3.75l2.42,3.75l2.44,3.75l2.45,3.74l2.46,3.74l2.48,3.74l2.49,3.73l2.5,3.73l3.46,5.32l3.48,5.31l3.51,5.3l3.53,5.3l3.56,5.29l3.59,5.28l3.62,5.28l3.9,5.63l-0.39,1.82l0.45,2.66l1.95,5.06l0.13,1.14l0.03,0.03l-0.12,1.14l0.89,1.45l2.36,2.25l0.44,0.95l-0.01,0.07l-0.13,0.6l-0.83,0.59l-3.5,1.82l-2.02,1.65l-2.31,2.87l-0.28,2.66l-0.52,2.14l-0.76,1.62l-0.95,1.44l-1.15,1.26l-1.07,0.67l-0.98,0.09l-0.72,1.83l-0.46,3.58l0.59,2.36l1.64,1.14l0.86,1.39l0.08,1.64l-0.47,1.5l-1.03,1.37l-1.39,0.58l-2.61,-0.31l0,0l-0.11,0.19l-2.16,-0.21l-5.38,-0.65l-5.39,-0.67l-5.38,-0.69l-5.38,-0.7l-5.38,-0.72l-5.38,-0.74l-5.38,-0.76l-5.38,-0.77l-0.01,-0.15l0.44,-2.41l-0.65,-1.04l-1.22,0.26l0.24,-3.21l0.62,-1.39l0.21,-1.45l-0.19,-3.74l-1.69,-4.89l-4.56,-6.68l-2.53,-2.49l-1.78,-2.8l-1.32,-0.98l-1.81,-0.63l-0.79,0.87l-1.93,-1.21l0.94,-2.39l-1.17,-3.95l-1.57,-0.8l-4.25,-0.84l-5.11,-3.34l-1.36,-1.55l-0.04,-2.16l-2.15,-2.43l-2.98,-2.62l-2.02,-0.11l-2.43,-0.93l-3.22,-2.19l-2.03,-0.72l-4.14,-0.74l-1.44,-0.67l-0.97,-1.94l-1.29,-1.19l0.85,-1.82l0.29,-1.78l0.6,-1.28l0.15,-3.13l1.28,-2.58l-0.18,-1.11l-0.63,-0.99l-2.33,-1.86l-0.09,-1.53l0.98,-1.82l-0.33,-1.47l-1.82,-1.8l-1.25,-3.28l-2.13,-2.21l-0.34,-2.78l-1.13,-1.98l-0.15,-1.51l-2.06,-5.84l-2.58,-4.85l0.07,-2.34l0.73,-3.02l1.97,-1.4l1.24,-1.37l0.35,-1.49l0.09,-1.14l-0.71,-2.24l-4.53,-2.54L303,265.5l0.82,-3.6l-0.46,-4.07l0.68,-2.35l0.53,-2.61l1.33,-0.21l0.98,0.51l-0.41,0.98l-0.19,1.92l0.81,1.73l0.99,0.94l0.67,1.64l0.68,0.64l0.8,0.34l-0.19,-0.98l-0.31,-0.68l-0.05,-1.93l-0.42,-2.57l-0.88,-1.61l0.04,-2.45l-0.38,-0.69l-0.09,-0.94l1.5,-0.64l1.85,-0.22l2.25,0.46l6.14,2.16l1.5,-0.19l1.04,0.51l0.83,0.16l-1.52,-1.09l-1.01,-0.08l-1.08,-0.45l-2.26,-0.53l-0.83,-0.52l-0.78,-1l-0.63,-0.26l-2.42,0.63l-0.87,-0.42l-1.77,-1.99l-0.89,-0.47l-1.75,0.31l-1.18,3.25l-0.27,2.6l-0.99,-0.02l-0.76,-1.33l-1.45,-1.09l-1.06,-1.33l-1.37,-2.29l-0.8,-0.93l-1.56,1.08l0.16,-0.66l1.06,-1.48l0.69,-2.82l1.02,2.73l-0.05,-1.72l-0.79,-2.11l-0.82,-0.9l-0.31,-3.45l-2.24,-2.71l-1.33,-3.67l-3.05,-6.35l1.05,-4.41l0.06,-5.98l1.68,-2.88l0.6,-2.23l0.24,-3.58l-0.27,-2.07l-2.08,-6.11l-2.43,-4.46l0.29,-2.69l0.58,-2.62l1.49,-2.02l1.42,-2.17l0.68,-0.48l0.1,0.32l-0.3,0.47l0.44,0.31l0.52,-0.99l0.47,-0.45l-0.5,-0.24l0.16,-0.32l0.52,-0.56l2.08,-2.78l1.15,-3.98l2.69,-4.47l0.46,-1.61l0.37,-3.67l-0.06,-2.29l-0.82,-1.88l1.25,-1.95l0.61,-2.05l-0.15,-0.43l4.31,1.38l4.17,1.32l4.18,1.31l4.18,1.3l4.19,1.28l4.19,1.27l4.19,1.26l4.2,1.25l4.2,1.23l4.2,1.22l4.21,1.21l4.21,1.2l4.21,1.19l4.22,1.17l4.22,1.16L371.75,174.28zM327.88,344.91l3.35,2.08l2.11,0l0.21,0.63l-0.36,0.4l-4.66,-0.35l-1.21,-0.95l0.09,-0.83l-0.25,-0.89L327.88,344.91zM319.97,344.03l-0.97,-0.2l-1.4,-0.63l0.65,-0.36l0.91,-0.14l0.18,0.34L319.97,344.03zM324.06,347.59l-1.34,-0.04l-0.88,-0.55l-0.96,-2.47l3.3,0.61l1.15,1.27l0.12,0.3L324.06,347.59zM351.66,367.08l0.52,1.82l-1.27,-0.53l-1.4,-0.26l-0.2,-0.97l-0.11,-1.31l-0.2,-0.38l-0.92,-0.35l-0.04,-0.13l0.04,-0.61l0.34,-0.21l2.62,2.09L351.66,367.08zM330.94,365.63l-0.82,-0.17l-1.06,-0.49l-0.26,-1.31l0.93,0.16l0.8,0.38l0.43,1.09L330.94,365.63zM348.58,379.15l-1.11,-0.07l-1.07,-0.74l-0.49,-2.35l-0.7,-1.92l0.72,-0.31l0.51,1.8l1.67,2.96L348.58,379.15z" fill="#FFFFFF" fill-opacity="0.8" stroke="#000000" stroke-opacity="0.5" stroke-width="0.5"></path> When you have found it, right click on the element and "Copy XPath". //*[#id="chartdiv"]/div/div[1]/svg/g[7]/g/g[1]/path[47] However, do it two more times and you will see that the last node is never the same. //*[#id="chartdiv"]/div/div[1]/svg/g[7]/g/g[1]/path[5] //*[#id="chartdiv"]/div/div[1]/svg/g[7]/g/g[1]/path[34] So we would like to find the <path> in //*[#id="chartdiv"]/div/div[1]/svg/g[7]/g/g[1]/ which the d attribute value starts with M371.75,174.28l. It should be something like: //*[#id="chartdiv"]/div/div[1]/svg/g[7]/g/g[1]/path[starts-with(#d, "M371.75,174.28l")] You shall have to repeat all these steps by yourself, because we might not have the same generated SVG. But because the SVG is using another namespace: /g becomes /*[name()="g"] /svg becomes /*[name()="svg"] /path becomes /*[name()="path"] Which gives the following XPath: //*[#id="chartdiv"]/div/div[1]/*[name()="svg"]/*[name()="g"][7]/*[name()="g"]/*[name()="g"][1]/*[name()="path"][starts-with(#d, "M371.75,174.28l")] In Selenium: webDriver.findElement( By.xpath( '//*[#id="chartdiv"]/div/div[1]/*[name()="svg"]/*[name()="g"][7]/*[name()="g"]/*[name()="g"][1]/*[name()="path"][starts-with(#d, "M371.75,174.28l")]' ) ).click();
How to use Jquery to highlight svg map?
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.
Access to svg's scripts
svg is an xml based graphics and you can add JavaScripts to it. I have tried to access to the script functions defined in a svg. The script in my svg is something like this:
<svg ... onload="RunScript(evt);"...>
<script type="text/javascript">
...
function RunScript(loadEvent) {
// Get object in my html by id
var objElement = top.document.getElementById('objid1');
if (objElement)
{
// Extend object tag object's methods
objElement.SVGsetDimension = setDimension;
...
}
function setDimention(w, h) {...}
In my main html file, the svg is embedded in an object tag like this:
<object id="objid1" data="mygrahic.svg" ... >
<a href="#" onclick="document.getElementById('objid1').SVGsetDimention(10, 10);
return false;"
...>Set new dimention</a>...
This one works fine. However if the svg xml file is referenced by a full URL (on another site) like this:
<object id="objid1" data="http://www.artlibrary.net/myaccount/mygrahic.svg" ... >
the codes do not work any more. It looks like that I cannot attach the method defined in my svg script to a method in my main html object tag element, or the top or document is not available in this case, or getElementById(..) just cannot find my object element in my svg script. Is there any way I can do in the svg xml script to find my html element?
Not sure if this problem is caused by the different DOMs, and there is no way for my svg script codes to figure out another DOM's object or element. It would be nice if there is any solution.
I think the clue might be in 'on another site'. There are strict rules about when JavaScript programs from different sites are allowed to communicate with teach other. The embedded SVG is being treated the same way a document inside an iframe would.
So, what you're doing is, from the point of view of a browser, equivalent to the following:
<script>
function stealPassword() {
var passwordInput = document.querySelector('input[type="password"]');
var value = passwordInput.value; // My password!
sendPasswordToServerToStealMyMoney(value);
}
</script>
<iframe src=mybank.com onload=stealPassword()></iframe>
I think you'll understand why this isn't desirable. (There should probably be a warning or an exception in your error console, though.)
pdc has this one right. Browsers work hard to prevent cross site scripting attacks (XSS) and this is the result. You cannot execute scripts in a document loaded from another domain, or using another port or protocol. For more info you can see: http://en.wikipedia.org/wiki/Same_origin_policy
From my experiense; Your Code is true ,so that run exactly. My PC Windows 7,IE9,installed Adobe Viewer. Both unless SVG Viewer,IE9 SVG drawed,but can't run SVG TAG Animation, only can run Javascript Animation. So,under Windows XP,IE8,installed Adobe SVG Viewer, Same result(run exactly). Firefox SVG can't run(SVG ecmascript animation) exactly under my PC.