Giter VIP home page Giter VIP logo

pathseg's Introduction

SVGPathSeg polyfill

This is a drop-in replacement for the SVGPathSeg, SVGPathSegList, and getPathSegAtLength APIs that were removed from SVG2 (https://lists.w3.org/Archives/Public/www-svg/2015Jun/0044.html). Existing code that uses the SVGPathSeg or SVGPathSegList APIs can use this polyfill to keep working. This polyfill is based on the exact code and tests that were removed from Chromium 47.

The SVGPathSeg API was difficult to use and has been removed from the SVG spec in favor of a new, awesomer API in the Paths module (https://lists.w3.org/Archives/Public/www-svg/2015Jun/0044.html). All new development should use the SVG Path Data API. There's a polyfill (path-data-polyfill.js) for browsers that do not yet support the new API.

Implementation status

Now passing all SVGPathSeg tests from the Chromium repository.

Now used by svg-edit and passes all svg-edit path tests.

Blink will likely remove SVGPathElement.getPathSegAtLength (see: Intent to deprecate and remove SVGPathElement.getPathSegAtLength). A getPathSegAtLength polyfill has been added to this library.

Firefox 59 will likely remove portions of the SVGPathSeg and SVGPathSegList APIs (see: Remove the WebIDL methods for creating and mutating SVG path data). This library has support for polyfilling this partial implementation.

Using pathseg.js

Just add pathseg.js to your server and drop this in your html or svg files:

<script src="pathseg.js"></script>

Example API usage

var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
var moveToSeg = path.createSVGPathSegMovetoRel(10, 10);
var lineToSeg = path.createSVGPathSegLinetoRel(100, 100);
path.pathSegList.appendItem(moveToSeg);
path.pathSegList.appendItem(lineToSeg);
console.log(path.getAttribute('d')); // m 10 10 l 100 100
moveToSeg.x += 200;
moveToSeg.y += 200;
console.log(path.getAttribute('d')); // m 210 210 l 100 100

These APIs have been removed from SVG 2 but their original definitions can be found at:

http://www.w3.org/TR/SVG/single-page.html#paths-InterfaceSVGPathSeg

http://www.w3.org/TR/SVG/single-page.html#paths-InterfaceSVGPathSegList

https://www.w3.org/TR/SVG/single-page.html#paths-__svg__SVGPathElement__getPathSegAtLength

pathseg's People

Contributors

progers avatar jgsmarques avatar isdh avatar

Stargazers

Michael Goyberg avatar

Watchers

Michael Goyberg avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.