Alternative for deprecated SVG pathSegList

by

@holger-will gave some very useful links.

You can modify your js code to use the new API.

for example:
Use var pathData = path.getPathData() instead of old var segs = path.pathSegList;
Use pathData[1].values[4] instead of old path.pathSegList.getItem(1).x
Use path.setPathData(pathData) to update the path element instead of old path.pathSegList.appendItem/insertItem/removeItem

Include the path-data-polyfill.js for browsers which have not supported the new API.
(Chrome 50 still has not implemented getPathData and setPathData. There may be a long way…)

Here is a code sample:

//svg code:
//...
//<path d="M0,0 L100,50" id="mypath"></path>
//<script href="https://stackoverflow.com/js/path-data-polyfill.js"></script>
//...

//js code:
var path = document.getElementById('mypath');
var pathdata = path.getPathData();
console.log(pathdata);
console.log(pathdata.length); //2
console.log(pathdata[0].type); //"M"
console.log(pathdata[0].values); //[0,0]
console.log(pathdata[1].type); //"L"
console.log(pathdata[1].values); //[100,50]
pathdata.push({type: "C", values: [100,-50,200,150,200,50]}); //add path segment
path.setPathData(pathdata); //set new path data
console.log(path.getAttribute('d')); //"M0,0 L100,50 C100,-50,200,150,200,50"

path data polyfill: https://github.com/jarek-foksa/path-data-polyfill

More Related Contents:

  1. HTML5 Canvas vs. SVG vs. div
  2. How to draw an inline svg (in DOM) to a canvas?
  3. Convert SVG to PNG with applied images as background to svg elements
  4. Creating SVG elements dynamically with javascript inside HTML
  5. Add SVG element to existing SVG using DOM
  6. How do you access the contents of an SVG file in an element?
  7. How to prevent an HTTP request just for a favicon?
  8. D3js take data from an array instead of a file
  9. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  10. Load event not fired on Safari when reloading page
  11. How to access the content of the “embed” tag in HTML
  12. Is it possible to use HTML’s .querySelector() to select by xlink attribute in an SVG?
  13. Is it possible to append a div inside an SVG element? [duplicate]
  14. size of createElement(“svg”) is 0,0
  15. Rasterizing an in-document SVG to Canvas
  16. Is there an equivalent of canvas’s toDataURL method for SVG? [closed]
  17. Animate marquee on SVG curve
  18. Dynamically created SVG elements are not rendered by the browser
  19. Include SVG files with HTML, and still be able to apply styles to them?
  20. How do I dynamically insert an SVG image into HTML?
  21. D3 put arc labels in a Pie Chart if there is enough space
  22. browser freezes with this js code, why?
  23. What should I do to use this webpacked JS library? [closed]
  24. .index() only for one instance of class [closed]
  25. getAttribute() versus Element object properties?
  26. How to render HTML string as real HTML?
  27. Can you target an elements parent element using event.target?
  28. Scroll Position of div with “overflow: auto”
  29. draw text in d3 arc javascript
  30. Create a table in SVG

Leave a Comment