It seems like a redraw bug in IE. One workaround is to reset the fill image by adding path_f.attr({fill:’url(http://www.fotoshack.us/fotos/58480536599_97943820.jpg)’}); after the translation. See fiddle here. This works okay in IE9 except for being slightly sluggish, but maybe you can find a cheaper way of forcing redraws. Not tested in older IEs. Also, it causes flickering … Read more
The biggest difference between RaphaelJS and KineticJS is that RaphaelJS uses SVG and KineticJS uses HTML5 Canvas for visualization. So it really depends on what kind of project you are doing. Here are some useful links which you should check out regarding SVG vs Canvas: Thoughts on when to use Canvas and SVG (also describes … Read more
Given the complexity of the issue, I thought it was worth detailing the issues and edge cases involved in any potential solution. The issues: 1 – Different implementations of touch events across devices and browsers. What works for some will definitely not work for others. You only need to glance at those patrickhlauke resources to … Read more
Note: For both drag and resize, you’ll have to make separate cases for certain different types of elements. Take a look in the example I provide later on that handles the dragging of both ellipses and rectangles in the same set of functions. To make an element dragable you use: element.drag(move, start, up); The three … Read more
Update: in recent versions of Photoshop, there is a built-in option to export the image as SVG, which works well on paths and custom shapes. Just do: File -> Export -> Export as… and select SVG in the file settings. Original Answer: Starting from Photoshop CC 14.2, you can create SVG files directly from Photoshop: … Read more
Open your SVG in a web browser. Run this code: var polys = document.querySelectorAll(‘polygon,polyline’); [].forEach.call(polys,convertPolyToPath); function convertPolyToPath(poly){ var svgNS = poly.ownerSVGElement.namespaceURI; var path = document.createElementNS(svgNS,’path’); var pathdata=”M “+poly.getAttribute(‘points’); if (poly.tagName==’polygon’) pathdata+=’z’; path.setAttribute(‘d’,pathdata); poly.getAttributeNames().forEach(function(name){ if(name !== ‘points’) path.setAttribute(name, poly.getAttribute(name)) }) poly.parentNode.replaceChild(path,poly); } Using the Developer Tools (or Firebug) of the browser, use “Copy as HTML” (or … Read more
SVG native attributes (not including xlink:href) do not share the SVG namespace; you can either use just setAttribute instead of setAttributeNS, or use svgimg.setAttributeNS(null,’x’,’0′); for example. Here it is, working: http://jsfiddle.net/UVFBj/8/ Note that I changed your fiddle to properly use XHTML, so that SVG works nicely within it in all major browsers.
SVG nodes don’t have a innerHTML property (they’re not HTML). Use textContent instead: t.node.textContent=”dddd”
Did major edit to associate elements in a more elegant way. Sets are good for grouping Raphael objects, but sets do not create their own elements, so you cannot drag and drop a set, since when you click on the canvas you either select the shape or the text, but never the set (since there … Read more
Text-anchor property for text method is set to ‘middle’ by default. If you want to left align it then change text-anchor in attributes for the object: var t = paper.text(50, 50, “Raphaël\nkicks\nbutt!”).attr({‘text-anchor’: ‘start’});