progers / pathseg Goto Github PK
View Code? Open in Web Editor NEWSVGPathSeg polyfill
License: Other
SVGPathSeg polyfill
License: Other
I am not 100% sure it is bug, however, my code is working fine on chrome#47, and after I switch to #48 with this polyfill, it doesn't work anymore.
The code before:
var pathDomSegments = pathDom.pathSegList; function getPathDomSegmentByGuid(guid) { var pathDomSegment = pathDomSegmentMetadata[guid]; for (var i = pathDomSegments.numberOfItems - 1; i >= 0; i--) { if (pathDomSegment === pathDomSegments[i]) return { index: i, pathDomSegment: pathDomSegment }; } }
Doesn't work anymore because === is not working with pathDomSegments[i], I assume it's reference validity issue,
As a workaround, I had to switch to getItem this in order for this to start working:
var pathDomSegments = pathDom.pathSegList; function getPathDomSegmentByGuid(guid) { var pathDomSegment = pathDomSegmentMetadata[guid]; for (var i = pathDomSegments.numberOfItems - 1; i >= 0; i--) { if (pathDomSegment === pathDomSegments.getItem(i)) return { index: i, pathDomSegment: pathDomSegment }; } }
Great work by the way!
See
Lines 314 to 334 in a1072a7
All other attributes follow the pattern of defining window.ATTRIBUTE_NAME
and then changing window.ATTRIBUTE_NAME.prototype
, except (as far as I could see) SVGPathElement
. This causes an error to be thrown, as we're in strict mode which disallows using variables before defining them.
v1.0.2 is not published to npm, v1.0.1 is still the latest but master appears to be v1.0.2
To support polyfilling GWT, we need to add a few extra lines as described by https://code.google.com/p/chromium/issues/detail?id=539385#c65
A couple minor changes have landed and I need to push an update for these.
Hey, npm is still on v1.0.2. Could you publish v1.1.0?
On SVGEdit init i have this kind of error in the JS console:
Error: Invalid value for attribute d="L 5 5 L 10 10"
SVGPathSegList._writeListToPath @ pathseg.js:386
SVGPathSegList.replaceItem @ pathseg.js:452
Error: Invalid value for attribute d="L 5 5 M 0 0 L 10 10"
SVGPathSegList._writeListToPath @ pathseg.js:386
SVGPathSegList.insertItemBefore @ pathseg.js:438
Can you please publish version 1.2 on npm ?
Thank you
removeItem API is No effect
chrome 54.0.2840.71 m
{
"name": "pathseg",
"version": "1.0.2",
"description": "A polyfill for SVG's SVGPathSeg and SVGPathSegList",
"main": "pathseg.js",
"directories": {
"test": "tests"
},
"repository": {
"type": "git",
"url": "https://github.com/progers/pathseg.git"
},
"author": "Philip Rogers",
"license": "Chromium's License",
"bugs": {
"url": "https://github.com/progers/pathseg/issues"
},
"homepage": "https://github.com/progers/pathseg",
"keywords": [
"SVG",
"polyfill",
"pathseg",
"SVGPathSeg",
"SVGPathSegList"
]
}
I've been stressing out trying to convert a SVG path element to a vertex format compatible with matter-js which makes use of this polyfill.
After spending a few good hours, I managed to get it working, however I noticed the browser gets always freezed for a few seconds and I found out that getPathSegAtLength is causing this.
Calling getPathSegAtLength on a loop with more 1000 items is slow and freezes the browser. See the code of matter-js here
Any ideas on how to optimize the function or prevent it from freezing the browser?
I tried web workers but they don't work with DOM elements
I'm requesting that you add your project to http://bower.io/. This package manager is among the most popular for JavaScript and only requires a bower.json
file in the project's root folder and version tagging in the git repo, after which the project can be registered on bower.io.
I'm submitting a companion PR to this issue containing a bower.json
, which I hope you'll accept and use to register this package ๐
When creating variables like SVGPathSeg or SVGPathSegClosePath, the namespace window is correctly being used, so that the functions are created in the correct context.
However, on the same code, properties for these variables do not use the window namespace, which means that a global variable will be accessed instead. When running on the browser, this works fine, since window is the global context for the application. But in other contexts this throws an exception since variables like SVGPathSegClosePath do not exist in the global context.
My use case is running mocha unit tests on an application that depends on pathseg, and these tests can't run since the plugin can't be initialized
There is a discussion about removing getPathSegAtLength from blink:
https://groups.google.com/a/chromium.org/d/msg/blink-dev/Gc1Aw282beo/NsfsKf8LBgAJ
Original spec:
https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__getPathSegAtLength
This isn't super simple to implement because it requires the distance-along-a-path algorithm.
We'd like to reference a particular version of pathseg in brower.json for repeatable builds in our project.
/cc @jwforres
pathSegTypeAsLetter
property of a SVGPathSegClosePath
object should always be uppercase "Z" (not lowercase "z") like web browsers does.
this.pathSegTypeAsLetter = typeAsLetter=='z'?'Z':typeAsLetter;
Hey @progers,
My application is currently consuming a library which relies on the pathseg polyfill (thanks so much for this polyfill btw!)
We're a React app and have a requirement to enable server-side rendering on our end. Unfortunately, importing the pathseg polyfill results in an error being thrown for window
being undefined in the server-side environment.
A quick one-liner can be added to make the polyfill compatible in a DOM-less SSR environment like react-dom/server
's. This would be placed as the first line inside the IIFE:
(function() { "use strict";
if (typeof window === 'undefined') return;
// ... rest of code here ...
}());
I can create a quick PR if needed?
Thanks!
Greg
Now that the latest version of Firefox also did the dum-dumb and removed the path functionality, I tested your polyfill in my little pet svg project. I get this error:
TypeError: path.pathSegList[0] is undefined
When I try to alter the pathSegList to move a path like this:
path.pathSegList[0].x = point.x;
This used to work. Console.logging path.pathSegList looks like this:
Object { _pathElement: path#middlep, _list: [โฆ], _mutationObserverConfig: {โฆ}, _pathElementMutationObserver: MutationObserver }
This is what it looks like when it works correctly:
SVGPathSegList [ SVGPathSegMovetoRel, SVGPathSegLinetoRel, SVGPathSegCurvetoCubicRel, SVGPathSegCurvetoCubicRel ]
In fact, it seems that on the second time I use something covered by the polyfill, this happens.
I don't feel like making a minimal example, but luckily this example by someone else also breaks in a similar manner: SGV rel to abs by kirkerafael. I get this error:
TypeError: segs.replaceItem is not a function[Learn More] script.js:20:19
convertToAbsolute https://run.plnkr.co/preview/cjevsn2os0007fillmjvzbyqv/script.js:20:19
convert https://run.plnkr.co/preview/cjevsn2os0007fillmjvzbyqv/script.js:43:3
onclick https://run.plnkr.co/preview/cjevsn2os0007fillmjvzbyqv/:1:1
I wonder if there's an easy fix that would make us Firefox users also benefit from your polyfill.
For example 2.163 in d="M 0 0 L 100 2.163" is parsed as 2.1630000000000003. I managed to work around this bug by changing three lines: jarek-foksa/path-data-polyfill@423ca79
Hi,
The license
field present in package.json
, i.e., "Chromium's License", is not a standard SPDX identifier, so it can cause license analysis tools to break. Can you update this?
Wikipedia's article links to https://web.archive.org/web/20081026150300/http://code.google.com/chromium/terms.html for the assorted licenses it is under so one could create a parenthesized "AND" expression like "(BSD-3-Clause AND MIT AND ...)". IANAL, but I wonder whether you really need to use that if you were merely adapting non-JavaScript source code for JavaScript.
Thanks!
I'm running into this issue while using react-particle-js. I traced it back to this library. What might be causing this issue? Is something wrong with the svg file that i'm using? Thanks
I've had this polyfill working great up until the release of Chrome 62 and above where it no longer works, giving the error message:
Uncaught TypeError: path.getPathSegAtLength is not a function
at Object.Svg.pathToVertices (matter-dev.js:7523)
at SVGPathElement.<anonymous> (Examples.js:14922)
Here is my page showing the error: http://brm.io/matter-js/demo/#terrain
(note that it's only the Terrain and Concave SVG Paths demos that use pathseg).
I've tested older versions of Chrome, plus the latest Firefox and Safari and they work fine.
Thank you for your work!
Is not supported on Android 5.0 webview?
Firefox 59 (currently in beta) doesn't work with the polyfill. As of that Firefox version, all the API that can be used to mutate an SVGPathSegList (along with any API that can be used to create SVGPathSeg type objects) was removed:
https://hg.mozilla.org/releases/mozilla-beta/rev/a9062e1bafb7
There are reasons for this awkward partial-removal, but suffice it to say here that it means Firefox is annoyingly incompatible with this polyfill.
I should create a pull request so the polyfill will work in Firefox, but I'm not sure when I'll get to that. I'm filing this issue in case someone can get to it before me.
If anyone does work on this, please comment here first so we don't duplicate work (I'll do the same).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.