scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-01 02:38:43 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Rename Svg acronyms in API to SVG.

Browse source
This commit is contained in:
Jürg Lehni 2013-04-23 07:19:08 -07:00
parent cebeb11301
commit 96d9b6730f
43 changed files with 98 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/Paperjs.org/InteractiveTiger.html
View file

@ -6,7 +6,7 @@
<script type="text/javascript" src="../../dist/paper.js"></script> <script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
// Import the tiger svg: // Import the tiger svg:
project.importSvg(document.getElementById('svg')); project.importSVG(document.getElementById('svg'));
// Resize the tiger to fit within the window: // Resize the tiger to fit within the window:
project.activeLayer.applyMatrix = true; project.activeLayer.applyMatrix = true;

2
examples/Paperjs.org/PathIntersections.html
View file

@ -5,7 +5,7 @@
<title>Path Intersections</title> <title>Path Intersections</title>
<script type="text/javascript" src="../../dist/paper.js"></script> <script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
var words = project.importSvg(document.getElementById('svg')); var words = project.importSVG(document.getElementById('svg'));
words.fillColor = null; words.fillColor = null;
words.strokeColor = 'black'; words.strokeColor = 'black';

2
examples/SVG Export/Circle Testing.html
View file

@ -21,7 +21,7 @@
var path = new Path.Circle(new Point(50, 50), 25); var path = new Path.Circle(new Point(50, 50), 25);
path.fillColor = 'red'; path.fillColor = 'red';
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>

2
examples/SVG Export/Compound Path.html
View file

@ -11,7 +11,7 @@
var path2 = new Path.Rectangle([50, 50], [200, 200]); var path2 = new Path.Rectangle([50, 50], [200, 200]);
var path3 = new Path.Rectangle([0, 0], [400, 400]); var path3 = new Path.Rectangle([0, 0], [400, 400]);
new CompoundPath(path1, path2, path3); new CompoundPath(path1, path2, path3);
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>

2
examples/SVG Export/Empty Path Testing.html
View file

@ -17,7 +17,7 @@
var path3 = new Path(); var path3 = new Path();
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>

2
examples/SVG Export/Gradients.html
View file

@ -41,7 +41,7 @@
rect.rotate(45).scale(0.7); rect.rotate(45).scale(0.7);
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>

2
examples/SVG Export/Group Transform.html
View file

@ -14,7 +14,7 @@
group.translate([100, 100]); group.translate([100, 100]);
group.scale(0.5); group.scale(0.5);
group.rotate(10); group.rotate(10);
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>

2
examples/SVG Export/Line Testing.html
View file

@ -30,7 +30,7 @@
line3.strokeColor = "yellow"; line3.strokeColor = "yellow";
line3.strokeWidth = "5"; line3.strokeWidth = "5";
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>

2
examples/SVG Export/Random Path Testing.html
View file

@ -28,7 +28,7 @@
var path = new Path.Star(center, points, radius1, radius2); var path = new Path.Star(center, points, radius1, radius2);
path.fillColor = 'black'; path.fillColor = 'black';
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>

2
examples/SVG Export/Raster.html
View file

@ -9,7 +9,7 @@
var raster = new Raster('lenna'); var raster = new Raster('lenna');
raster.position = view.center; raster.position = view.center;
raster.rotate(45); raster.rotate(45);
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>

2
examples/SVG Export/Rect and Attribute Testing.html
View file

@ -42,7 +42,7 @@
path4.strokeColor= 'yellow'; path4.strokeColor= 'yellow';
path4.fillColor='purple'; path4.fillColor='purple';
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>

2
examples/SVG Export/Rotated Primitives.html
View file

@ -44,7 +44,7 @@
} }
} }
}; };
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>

2
examples/SVG Export/Symbols.html
View file

@ -16,7 +16,7 @@
p1.rotate(45); p1.rotate(45);
var p2 = symbol.place([300, 200]); var p2 = symbol.place([300, 200]);
p2.rotate(-30); p2.rotate(-30);
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>

2
examples/SVG Export/Text Testing.html
View file

@ -34,7 +34,7 @@
c.fillColor = colors[i]; c.fillColor = colors[i];
} }
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>

2
examples/SVG Export/Tiger.html
View file

@ -11,7 +11,7 @@
project.importJSON(tiger); project.importJSON(tiger);
console.log('Load JSON', Date.now() - start); console.log('Load JSON', Date.now() - start);
var start = Date.now(); var start = Date.now();
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSVG());
console.log('Export SVG', Date.now() - start); console.log('Export SVG', Date.now() - start);
</script> </script>
</head> </head>

2
examples/SVG Export/Transform Test 1.html
View file

@ -18,7 +18,7 @@
clonedPath.rotate(angle * i, circlePath.bounds.topLeft); clonedPath.rotate(angle * i, circlePath.bounds.topLeft);
}; };
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>

2
examples/SVG Export/Transform Test 2.html
View file

@ -16,7 +16,7 @@
copy.rotate(-45); copy.rotate(-45);
copy.scale(0.5); copy.scale(0.5);
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>

2
examples/SVG Import/Circle and Ellipse Testing.html
View file

@ -6,7 +6,7 @@
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script> <script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
project.importSvg(document.getElementById('svg')); project.importSVG(document.getElementById('svg'));
</script> </script>
</head> </head>
<body> <body>

2
examples/SVG Import/Clipping.html
View file

@ -5,7 +5,7 @@
<title>Clipping</title> <title>Clipping</title>
<script type="text/javascript" src="../../dist/paper.js"></script> <script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
project.importSvg(document.getElementById('Layer_1')); project.importSVG(document.getElementById('Layer_1'));
</script> </script>
</head> </head>
<body> <body>

2
examples/SVG Import/Gradients.html
View file

@ -5,7 +5,7 @@
<title>Gradients</title> <title>Gradients</title>
<script type="text/javascript" src="../../dist/paper.js"></script> <script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
project.importSvg(document.getElementById('Layer_1')); project.importSVG(document.getElementById('Layer_1'));
</script> </script>
</head> </head>
<body> <body>

2
examples/SVG Import/Inkscape.html
View file

@ -7,7 +7,7 @@
<script type="text/javascript" src="../../dist/paper.js"></script> <script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
var start = Date.now(); var start = Date.now();
project.importSvg(document.getElementById('svg2')); project.importSVG(document.getElementById('svg2'));
console.log(Date.now() - start); console.log(Date.now() - start);
// console.log(project.exportJSON()); // console.log(project.exportJSON());
</script> </script>

2
examples/SVG Import/Line Testing.html
View file

@ -6,7 +6,7 @@
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script> <script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
project.importSvg(document.getElementById('svg')); project.importSVG(document.getElementById('svg'));
</script> </script>
</head> </head>
<body> <body>

2
examples/SVG Import/Multiple Paths Test 1.html
View file

@ -6,7 +6,7 @@
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script> <script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
project.importSvg(document.getElementById('svg')); project.importSVG(document.getElementById('svg'));
</script> </script>
</head> </head>
<body> <body>

2
examples/SVG Import/Multiple Paths Test 2.html
View file

@ -6,7 +6,7 @@
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script> <script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
project.importSvg(document.getElementById('svg')); project.importSVG(document.getElementById('svg'));
</script> </script>
</head> </head>
<body> <body>

2
examples/SVG Import/Nested Groups Test.html
View file

@ -6,7 +6,7 @@
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script> <script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
project.importSvg(document.getElementById('svg')); project.importSVG(document.getElementById('svg'));
</script> </script>
</head> </head>
<body> <body>

2
examples/SVG Import/Polybezier.html
View file

@ -6,7 +6,7 @@
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script> <script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
project.importSvg(document.getElementById('svg')); project.importSVG(document.getElementById('svg'));
</script> </script>
<style type="text/css"> <style type="text/css">
.Border { fill:none; stroke:blue; stroke-width:1; } .Border { fill:none; stroke:blue; stroke-width:1; }

2
examples/SVG Import/Rect Testing.html
View file

@ -6,7 +6,7 @@
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script> <script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
var group = project.importSvg(document.getElementById('svg')); var group = project.importSVG(document.getElementById('svg'));
console.log(JSON.stringify(group.children[0].data)); console.log(JSON.stringify(group.children[0].data));
</script> </script>
</head> </head>

2
examples/SVG Import/Symbols.html
View file

@ -6,7 +6,7 @@
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script> <script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
project.importSvg(document.getElementById('svg')); project.importSVG(document.getElementById('svg'));
</script> </script>
</head> </head>
<body> <body>

2
examples/SVG Import/Testing.html
View file

@ -6,7 +6,7 @@
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script> <script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
project.importSvg(document.getElementById('svg')); project.importSVG(document.getElementById('svg'));
</script> </script>
</head> </head>
<body> <body>

2
examples/SVG Import/Text Testing.html
View file

@ -6,7 +6,7 @@
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script> <script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
project.importSvg(document.getElementById('svg')); project.importSVG(document.getElementById('svg'));
</script> </script>
</head> </head>
<body> <body>

2
examples/SVG Import/Tiger.html
View file

@ -7,7 +7,7 @@
<script type="text/javascript" src="../../dist/paper.js"></script> <script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
var start = Date.now(); var start = Date.now();
project.importSvg(document.getElementById('svg')); project.importSVG(document.getElementById('svg'));
console.log(Date.now() - start); console.log(Date.now() - start);
// console.log(project.exportJSON()); // console.log(project.exportJSON());
</script> </script>

2
examples/SVG Import/Transform Testing.html
View file

@ -6,7 +6,7 @@
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script> <script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
project.importSvg(document.getElementById('svg')); project.importSVG(document.getElementById('svg'));
</script> </script>
</head> </head>
<body> <body>

2
examples/SVG Import/Viewbox.html
View file

@ -6,7 +6,7 @@
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script> <script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
project.importSvg(document.getElementById('svg')); project.importSVG(document.getElementById('svg'));
</script> </script>
</head> </head>
<body> <body>

2
src/item/Item.js
View file

@ -2342,7 +2342,7 @@ var Item = this.Item = Base.extend(Callback, {
// DOCS: document exportJSON (documented in @private Base) // DOCS: document exportJSON (documented in @private Base)
// DOCS: document importJSON // DOCS: document importJSON
// DOCS: Figure out a way to group these together with importSvg / exportSvg // DOCS: Figure out a way to group these together with importSVG / exportSVG
importJSON: function(json) { importJSON: function(json) {
return this.addChild(Base.importJSON(json)); return this.addChild(Base.importJSON(json));

6
src/paper.js
View file

@ -117,9 +117,9 @@ var paper = new function() {
/*#*/ } // options.browser /*#*/ } // options.browser
/*#*/ if (options.svg) { /*#*/ if (options.svg) {
/*#*/ include('svg/SvgStyles.js'); /*#*/ include('svg/SVGStyles.js');
/*#*/ include('svg/SvgExport.js'); /*#*/ include('svg/SVGExport.js');
/*#*/ include('svg/SvgImport.js'); /*#*/ include('svg/SVGImport.js');
/*#*/ } // options.svg /*#*/ } // options.svg
/*#*/ include('core/PaperScript.js'); /*#*/ include('core/PaperScript.js');

2
src/project/Project.js
View file

@ -268,7 +268,7 @@ var Project = this.Project = PaperScopeItem.extend(/** @lends Project# */{
// DOCS: document exportJSON (documented in @private Base) // DOCS: document exportJSON (documented in @private Base)
// DOCS: document importJSON // DOCS: document importJSON
// DOCS: Figure out a way to group these together with importSvg / exportSvg // DOCS: Figure out a way to group these together with importSVG / exportSVG
importJSON: function(json) { importJSON: function(json) {
return Base.importJSON(json); return Base.importJSON(json);

20
src/svg/SvgExport.js → src/svg/SVGExport.js
View file

@ -173,7 +173,7 @@ new function() {
attrs.fill = 'none'; attrs.fill = 'none';
var node = createElement('g', attrs); var node = createElement('g', attrs);
for (var i = 0, l = children.length; i < l; i++) { for (var i = 0, l = children.length; i < l; i++) {
var child = exportSvg(children[i]); var child = exportSVG(children[i]);
if (child) if (child)
node.appendChild(child); node.appendChild(child);
} }
@ -321,7 +321,7 @@ new function() {
symbolNode = createElement('symbol', { symbolNode = createElement('symbol', {
viewBox: formatter.rectangle(bounds) viewBox: formatter.rectangle(bounds)
}); });
symbolNode.appendChild(exportSvg(definition)); symbolNode.appendChild(exportSVG(definition));
setDefinition(symbol, symbolNode); setDefinition(symbol, symbolNode);
} }
attrs.href = '#' + symbolNode.id; attrs.href = '#' + symbolNode.id;
@ -337,7 +337,7 @@ new function() {
// we need to create a separate gradient object for each gradient, // we need to create a separate gradient object for each gradient,
// even when they share the same gradient defintion. // even when they share the same gradient defintion.
// http://www.svgopen.org/2011/papers/20-Separating_gradients_from_geometry/ // http://www.svgopen.org/2011/papers/20-Separating_gradients_from_geometry/
// TODO: Implement gradient merging in SvgImport // TODO: Implement gradient merging in SVGImport
var gradientNode = getDefinition(color); var gradientNode = getDefinition(color);
if (!gradientNode) { if (!gradientNode) {
var gradient = color.getGradient(), var gradient = color.getGradient(),
@ -408,7 +408,7 @@ new function() {
if (item._name != null) if (item._name != null)
attrs.id = item._name; attrs.id = item._name;
Base.each(SvgStyles, function(entry) { Base.each(SVGStyles, function(entry) {
// Get a given style only if it differs from the value on the parent // Get a given style only if it differs from the value on the parent
// (A layer or group which can have style values in SVG). // (A layer or group which can have style values in SVG).
var value = style[entry.get](); var value = style[entry.get]();
@ -464,7 +464,7 @@ new function() {
return node; return node;
// We can only use node nodes as defintion containers. Have the loop // We can only use node nodes as defintion containers. Have the loop
// produce one if it's a single item of another type (when calling // produce one if it's a single item of another type (when calling
// #exportSvg() on an item rather than a whole project) // #exportSVG() on an item rather than a whole project)
var container = node.nodeName == 'svg' && node, var container = node.nodeName == 'svg' && node,
firstChild = container ? container.firstChild : node; firstChild = container ? container.firstChild : node;
for (var i in definitions.svgs) { for (var i in definitions.svgs) {
@ -479,7 +479,7 @@ new function() {
return container; return container;
} }
function exportSvg(item) { function exportSVG(item) {
var exporter = exporters[item._type], var exporter = exporters[item._type],
node = exporter && exporter(item, item._type); node = exporter && exporter(item, item._type);
if (node && item._data) if (node && item._data)
@ -496,8 +496,8 @@ new function() {
* *
* @return {SVGSVGElement} the item converted to an SVG node * @return {SVGSVGElement} the item converted to an SVG node
*/ */
exportSvg: function() { exportSVG: function() {
var node = exportSvg(this); var node = exportSVG(this);
return exportDefinitions(node); return exportDefinitions(node);
} }
}); });
@ -511,11 +511,11 @@ new function() {
* *
* @return {SVGSVGElement} the project converted to an SVG node * @return {SVGSVGElement} the project converted to an SVG node
*/ */
exportSvg: function() { exportSVG: function() {
var node = createElement('svg'), var node = createElement('svg'),
layers = this.layers; layers = this.layers;
for (var i = 0, l = layers.length; i < l; i++) for (var i = 0, l = layers.length; i < l; i++)
node.appendChild(exportSvg(layers[i])); node.appendChild(exportSVG(layers[i]));
return exportDefinitions(node); return exportDefinitions(node);
} }
}); });

18
src/svg/SvgImport.js → src/svg/SVGImport.js
View file

@ -75,7 +75,7 @@ new function() {
// Style on items needs to be handled differently than all other items: // Style on items needs to be handled differently than all other items:
// We first apply the style to the item, then use it as the project's // We first apply the style to the item, then use it as the project's
// currentStyle, so it is used as a default for the creation of all // currentStyle, so it is used as a default for the creation of all
// nested items. importSvg then needs to check for items and avoid // nested items. importSVG then needs to check for items and avoid
// calling applyAttributes() again. // calling applyAttributes() again.
// Set the default color to black, since that's how SVG handles fills. // Set the default color to black, since that's how SVG handles fills.
item.setFillColor('black'); item.setFillColor('black');
@ -86,7 +86,7 @@ new function() {
for (var i = 0, l = nodes.length; i < l; i++) { for (var i = 0, l = nodes.length; i < l; i++) {
var childNode = nodes[i], var childNode = nodes[i],
child; child;
if (childNode.nodeType == 1 && (child = importSvg(childNode))) { if (childNode.nodeType == 1 && (child = importSVG(childNode))) {
// If adding CompoundPaths to other CompoundPaths, // If adding CompoundPaths to other CompoundPaths,
// we need to "unbox" them first: // we need to "unbox" them first:
if (clip && child._type === 'compound-path') { if (clip && child._type === 'compound-path') {
@ -290,8 +290,8 @@ new function() {
color.setAlpha(parseFloat(value)); color.setAlpha(parseFloat(value));
} }
// Create apply-functions for attributes, and merge in those for SvgStlyes: // Create apply-functions for attributes, and merge in those for SVGStlyes:
var attributes = Base.each(SvgStyles, function(entry) { var attributes = Base.each(SVGStyles, function(entry) {
this[entry.attribute] = function(item, value, name, node) { this[entry.attribute] = function(item, value, name, node) {
item._style[entry.set](convertValue(value, entry.type)); item._style[entry.set](convertValue(value, entry.type));
}; };
@ -448,7 +448,7 @@ new function() {
return match && definitions[match[1]]; return match && definitions[match[1]];
} }
function importSvg(node, clearDefs) { function importSVG(node, clearDefs) {
var type = node.nodeName, var type = node.nodeName,
importer = importers[type], importer = importers[type],
item = importer && importer(node, type), item = importer && importer(node, type),
@ -472,8 +472,8 @@ new function() {
* @param {SVGSVGElement} node the SVG DOM node to convert * @param {SVGSVGElement} node the SVG DOM node to convert
* @return {Item} the converted Paper.js item * @return {Item} the converted Paper.js item
*/ */
importSvg: function(node) { importSVG: function(node) {
return this.addChild(importSvg(node, true)); return this.addChild(importSVG(node, true));
} }
}); });
@ -485,9 +485,9 @@ new function() {
* @param {SVGSVGElement} node the SVG DOM node to convert * @param {SVGSVGElement} node the SVG DOM node to convert
* @return {Item} the converted Paper.js item * @return {Item} the converted Paper.js item
*/ */
importSvg: function(node) { importSVG: function(node) {
this.activate(); this.activate();
return importSvg(node, true); return importSVG(node, true);
} }
}); });
}; };

2
src/svg/SvgStyles.js → src/svg/SVGStyles.js
View file

@ -10,7 +10,7 @@
* All rights reserved. * All rights reserved.
*/ */
var SvgStyles = Base.each({ var SVGStyles = Base.each({
fillColor: ['fill', 'color'], fillColor: ['fill', 'color'],
strokeColor: ['stroke', 'color'], strokeColor: ['stroke', 'color'],
strokeWidth: ['stroke-width', 'number'], strokeWidth: ['stroke-width', 'number'],

2
test/lib/helpers.js
View file

@ -362,6 +362,6 @@ function compareProjects(project, project2) {
// SVG // SVG
function createSvg(xml) { function createSVG(xml) {
return new DOMParser().parseFromString('<svg xmlns="http://www.w3.org/2000/svg">' + xml + '</svg>', 'application/xml'); return new DOMParser().parseFromString('<svg xmlns="http://www.w3.org/2000/svg">' + xml + '</svg>', 'application/xml');
} }

32
test/tests/SvgExport.js → test/tests/SVGExport.js
View file

@ -10,7 +10,7 @@
* All rights reserved. * All rights reserved.
*/ */
module('SvgExport'); module('SVGExport');
test('compare line path functions', function() { test('compare line path functions', function() {
var svgns = 'http://www.w3.org/2000/svg'; var svgns = 'http://www.w3.org/2000/svg';
@ -26,7 +26,7 @@ test('compare line path functions', function() {
var line = new Path.Line([x1, y1], [x2, y2]); var line = new Path.Line([x1, y1], [x2, y2]);
var exportedLine = line.exportSvg(); var exportedLine = line.exportSVG();
var shapex1 = shape.getAttribute('x1'); var shapex1 = shape.getAttribute('x1');
var shapey1 = shape.getAttribute('y1'); var shapey1 = shape.getAttribute('y1');
@ -59,7 +59,7 @@ test('compare negative line path functions', function() {
var line = new Path.Line([x1, y1], [x2, y2]); var line = new Path.Line([x1, y1], [x2, y2]);
var exportedLine = line.exportSvg(); var exportedLine = line.exportSVG();
var shapex1 = shape.getAttribute('x1'); var shapex1 = shape.getAttribute('x1');
var shapey1 = shape.getAttribute('y1'); var shapey1 = shape.getAttribute('y1');
@ -92,7 +92,7 @@ test('compare invalid line path functions', function() {
var line = new Path.Line([x1, y1], [x2, y2]); var line = new Path.Line([x1, y1], [x2, y2]);
var exportedLine = line.exportSvg(); var exportedLine = line.exportSVG();
var shapex1 = shape.getAttribute('x1'); var shapex1 = shape.getAttribute('x1');
var shapey1 = shape.getAttribute('y1'); var shapey1 = shape.getAttribute('y1');
@ -127,7 +127,7 @@ test('compare invalid line path functions', function() {
var size = new Size(100, 100); var size = new Size(100, 100);
var path = new Path.Rectangle(point, size); var path = new Path.Rectangle(point, size);
var exportedRectangle = path.exportSvg(); var exportedRectangle = path.exportSVG();
var shapex1 = shape.getAttribute('x'); var shapex1 = shape.getAttribute('x');
var shapey1 = shape.getAttribute('y1'); var shapey1 = shape.getAttribute('y1');
@ -162,7 +162,7 @@ test('compare negative rectangle values', function() {
var size = new Size(width, height); var size = new Size(width, height);
var rect = new Rectangle(topLeft, size); var rect = new Rectangle(topLeft, size);
var exportedRectangle = rect.exportSvg(); var exportedRectangle = rect.exportSVG();
var shapex = shape.getAttribute('x'); var shapex = shape.getAttribute('x');
var shapey = shape.getAttribute('y'); var shapey = shape.getAttribute('y');
@ -196,7 +196,7 @@ test('compare invalid rectangle values', function() {
var size = new Size(width, height); var size = new Size(width, height);
var rect = new Rectangle(topLeft, size); var rect = new Rectangle(topLeft, size);
var exportedRectangle = rect.exportSvg(); var exportedRectangle = rect.exportSVG();
var shapex = shape.getAttribute('x'); var shapex = shape.getAttribute('x');
var shapey = shape.getAttribute('y'); var shapey = shape.getAttribute('y');
@ -236,7 +236,7 @@ test('compare rounded rectangle values', function() {
var rect = new Rectangle(topLeft, size); var rect = new Rectangle(topLeft, size);
var roundRect = new Path.Rectangle(rect, cornerSize); var roundRect = new Path.Rectangle(rect, cornerSize);
var exportedRectangle = rect.exportSvg(); var exportedRectangle = rect.exportSVG();
var shapex = shape.getAttribute('x'); var shapex = shape.getAttribute('x');
var shapey = shape.getAttribute('y'); var shapey = shape.getAttribute('y');
@ -280,7 +280,7 @@ test('compare negative rounded rectangle values', function() {
var rect = new Rectangle(topLeft, size); var rect = new Rectangle(topLeft, size);
var roundRect = new Path.Rectangle(rect, cornerSize); var roundRect = new Path.Rectangle(rect, cornerSize);
var exportedRectangle = rect.exportSvg(); var exportedRectangle = rect.exportSVG();
var shapex = shape.getAttribute('x'); var shapex = shape.getAttribute('x');
var shapey = shape.getAttribute('y'); var shapey = shape.getAttribute('y');
@ -324,7 +324,7 @@ test('compare invalid rounded rectangle values', function() {
var rect = new Rectangle(topLeft, size); var rect = new Rectangle(topLeft, size);
var roundRect = new Path.Rectangle(rect, cornerSize); var roundRect = new Path.Rectangle(rect, cornerSize);
var exportedRectangle = rect.exportSvg(); var exportedRectangle = rect.exportSVG();
var shapex = shape.getAttribute('x'); var shapex = shape.getAttribute('x');
var shapey = shape.getAttribute('y'); var shapey = shape.getAttribute('y');
@ -366,7 +366,7 @@ test('compare ellipse values', function() {
var rect = new Rectangle(topLeft, bottomRight); var rect = new Rectangle(topLeft, bottomRight);
var ellipse = new Path.Ellipse(rect); var ellipse = new Path.Ellipse(rect);
var exportedEllipse = ellipse.exportSvg(); var exportedEllipse = ellipse.exportSVG();
var shapecx = shape.getAttribute('cx'); var shapecx = shape.getAttribute('cx');
var shapecy = shape.getAttribute('cy'); var shapecy = shape.getAttribute('cy');
@ -398,7 +398,7 @@ test('compare circle values', function() {
var center = new Point(cx, cy); var center = new Point(cx, cy);
var circle = new Path.Circle(center, r); var circle = new Path.Circle(center, r);
var exportedCircle = circle.exportSvg(); var exportedCircle = circle.exportSVG();
var shapecx = shape.getAttribute('cx'); var shapecx = shape.getAttribute('cx');
var shapecy = shape.getAttribute('cy'); var shapecy = shape.getAttribute('cy');
@ -434,7 +434,7 @@ test('compare polygon values', function() {
poly.closePath(); poly.closePath();
} }
var exportedPolygon = poly.exportSvg(); var exportedPolygon = poly.exportSVG();
var svgPoints = shape.getAttribute('points'); var svgPoints = shape.getAttribute('points');
@ -464,7 +464,7 @@ test('compare negative polygon values', function() {
poly.closePath(); poly.closePath();
} }
var exportedPolygon = poly.exportSvg(); var exportedPolygon = poly.exportSVG();
var svgPoints = shape.getAttribute('points'); var svgPoints = shape.getAttribute('points');
@ -494,7 +494,7 @@ test('compare polyline values', function() {
poly.closePath(); poly.closePath();
} }
var exportedPolygon = poly.exportSvg(); var exportedPolygon = poly.exportSVG();
var svgPoints = shape.getAttribute('points'); var svgPoints = shape.getAttribute('points');
@ -524,7 +524,7 @@ test('compare negative polyline values', function() {
poly.closePath(); poly.closePath();
} }
var exportedPolygon = poly.exportSvg(); var exportedPolygon = poly.exportSVG();
var svgPoints = shape.getAttribute('points'); var svgPoints = shape.getAttribute('points');

42
test/tests/SvgImport.js → test/tests/SVGImport.js
View file

@ -10,11 +10,11 @@
* All rights reserved. * All rights reserved.
*/ */
module('SvgImport'); module('SVGImport');
test('Import complex CompoundPath and clone', function() { test('Import complex CompoundPath and clone', function() {
var svg = createSvg('<path id="path" fill="red" d="M4,14h20v-2H4V14z M15,26h7v-2h-7V26z M15,22h9v-2h-9V22z M15,18h9v-2h-9V18z M4,26h9V16H4V26z M28,10V6H0v22c0,0,0,4,4,4 h25c0,0,3-0.062,3-4V10H28z M4,30c-2,0-2-2-2-2V8h24v20c0,0.921,0.284,1.558,0.676,2H4z"/>;'); var svg = createSVG('<path id="path" fill="red" d="M4,14h20v-2H4V14z M15,26h7v-2h-7V26z M15,22h9v-2h-9V22z M15,18h9v-2h-9V18z M4,26h9V16H4V26z M28,10V6H0v22c0,0,0,4,4,4 h25c0,0,3-0.062,3-4V10H28z M4,30c-2,0-2-2-2-2V8h24v20c0,0.921,0.284,1.558,0.676,2H4z"/>;');
var item = paper.project.importSvg(svg.getElementById('path')); var item = paper.project.importSVG(svg.getElementById('path'));
compareItems(item, item.clone(), true, true); compareItems(item, item.clone(), true, true);
}); });
@ -30,7 +30,7 @@ test('make an svg line', function() {
shape.setAttribute('x2', x2); shape.setAttribute('x2', x2);
shape.setAttribute('y2', y2); shape.setAttribute('y2', y2);
var importedLine = paper.project.importSvg(shape); var importedLine = paper.project.importSVG(shape);
var line = new Path.Line([x1, y1], [x2, y2]); var line = new Path.Line([x1, y1], [x2, y2]);
@ -45,7 +45,7 @@ test('make an svg line with invalid values', function() {
shape.setAttribute('x2', null); shape.setAttribute('x2', null);
shape.setAttribute('y2', null); shape.setAttribute('y2', null);
var importedLine = paper.project.importSvg(shape); var importedLine = paper.project.importSVG(shape);
var line = new Path.Line([0, 0], [0, 0]); var line = new Path.Line([0, 0], [0, 0]);
@ -64,7 +64,7 @@ test('compare rectangle values', function() {
shape.setAttribute('width', width); shape.setAttribute('width', width);
shape.setAttribute('height', height); shape.setAttribute('height', height);
var importedRectangle = paper.project.importSvg(shape); var importedRectangle = paper.project.importSVG(shape);
var topLeft = new Point(x, y); var topLeft = new Point(x, y);
var size = new Size(width, height); var size = new Size(width, height);
@ -87,7 +87,7 @@ test('compare negative rectangle values', function() {
shape.setAttribute('width', width); shape.setAttribute('width', width);
shape.setAttribute('height', height); shape.setAttribute('height', height);
var importedRectangle = paper.project.importSvg(shape); var importedRectangle = paper.project.importSVG(shape);
var topLeft = new Point(x, y); var topLeft = new Point(x, y);
var size = new Size(width, height); var size = new Size(width, height);
var rectangle = new Rectangle(topLeft, size); var rectangle = new Rectangle(topLeft, size);
@ -106,7 +106,7 @@ test('compare invalid rectangle values', function() {
shape.setAttribute('width', null); shape.setAttribute('width', null);
shape.setAttribute('height', null); shape.setAttribute('height', null);
var importedRectangle = paper.project.importSvg(shape); var importedRectangle = paper.project.importSVG(shape);
var topLeft = new Point(0, 0); var topLeft = new Point(0, 0);
var size = new Size(0, 0); var size = new Size(0, 0);
@ -132,7 +132,7 @@ test('compare round rectangle values', function() {
shape.setAttribute('width', width); shape.setAttribute('width', width);
shape.setAttribute('height', height); shape.setAttribute('height', height);
var importedRectangle = paper.project.importSvg(shape); var importedRectangle = paper.project.importSVG(shape);
var topLeft = new Point(x, y); var topLeft = new Point(x, y);
var size = new Size(width, height); var size = new Size(width, height);
@ -159,7 +159,7 @@ test('compare negative round rectangle values', function() {
shape.setAttribute('width', width); shape.setAttribute('width', width);
shape.setAttribute('height', height); shape.setAttribute('height', height);
var importedRectangle = paper.project.importSvg(shape); var importedRectangle = paper.project.importSVG(shape);
var topLeft = new Point(x, y); var topLeft = new Point(x, y);
var size = new Size(width, height); var size = new Size(width, height);
@ -186,7 +186,7 @@ test('compare invalid round rectangle values', function() {
shape.setAttribute('width', width); shape.setAttribute('width', width);
shape.setAttribute('height', height); shape.setAttribute('height', height);
var importedRectangle = paper.project.importSvg(shape); var importedRectangle = paper.project.importSVG(shape);
var topLeft = new Point(x, y); var topLeft = new Point(x, y);
var size = new Size(width, height); var size = new Size(width, height);
@ -209,7 +209,7 @@ test('compare ellipse values', function() {
shape.setAttribute('rx', rx); shape.setAttribute('rx', rx);
shape.setAttribute('ry', ry); shape.setAttribute('ry', ry);
var importedEllipse = paper.project.importSvg(shape); var importedEllipse = paper.project.importSVG(shape);
var center = new Point(cx, cy); var center = new Point(cx, cy);
var offset = new Point(rx, ry); var offset = new Point(rx, ry);
@ -234,7 +234,7 @@ test('compare negative ellipse values', function() {
shape.setAttribute('rx', rx); shape.setAttribute('rx', rx);
shape.setAttribute('ry', ry); shape.setAttribute('ry', ry);
var importedEllipse = paper.project.importSvg(shape); var importedEllipse = paper.project.importSVG(shape);
var center = new Point(cx, cy); var center = new Point(cx, cy);
var offset = new Point(rx, ry); var offset = new Point(rx, ry);
@ -255,7 +255,7 @@ test('compare invalid ellipse values', function() {
shape.setAttribute('rx', null); shape.setAttribute('rx', null);
shape.setAttribute('ry', null); shape.setAttribute('ry', null);
var importedEllipse = paper.project.importSvg(shape); var importedEllipse = paper.project.importSVG(shape);
var center = new Point(0, 0); var center = new Point(0, 0);
var offset = new Point(0, 0); var offset = new Point(0, 0);
@ -278,7 +278,7 @@ test('compare circle values', function() {
shape.setAttribute('cy', cy); shape.setAttribute('cy', cy);
shape.setAttribute('r', r); shape.setAttribute('r', r);
var importedCircle = paper.project.importSvg(shape); var importedCircle = paper.project.importSVG(shape);
var center = new Point(cx, cy); var center = new Point(cx, cy);
var circle = new Path.Circle(center, r); var circle = new Path.Circle(center, r);
@ -296,7 +296,7 @@ test('compare negative circle values', function() {
shape.setAttribute('cy', cy); shape.setAttribute('cy', cy);
shape.setAttribute('r', r); shape.setAttribute('r', r);
var importedCircle = paper.project.importSvg(shape); var importedCircle = paper.project.importSVG(shape);
var center = new Point(cx, cy); var center = new Point(cx, cy);
var circle = new Path.Circle(center, r); var circle = new Path.Circle(center, r);
@ -312,7 +312,7 @@ test('compare invalid circle values', function() {
shape.setAttribute('cy', null); shape.setAttribute('cy', null);
shape.setAttribute('r', null); shape.setAttribute('r', null);
var importedCircle = paper.project.importSvg(shape); var importedCircle = paper.project.importSVG(shape);
var center = new Point(0, 0); var center = new Point(0, 0);
var circle = new Path.Circle(center, 0); var circle = new Path.Circle(center, 0);
@ -327,7 +327,7 @@ test('compare polygon values', function() {
var svgpoints = "100,10 40,180 190,60 10,60 160,180"; var svgpoints = "100,10 40,180 190,60 10,60 160,180";
shape.setAttribute('points', svgpoints); shape.setAttribute('points', svgpoints);
var importedPolygon = paper.project.importSvg(shape); var importedPolygon = paper.project.importSVG(shape);
var poly = new Path(); var poly = new Path();
var points = shape.points; var points = shape.points;
@ -348,7 +348,7 @@ test('compare negative polygon values', function() {
var svgpoints = "-100,-10 -40,-180 -190,-60 -10,-60 -160,-180"; var svgpoints = "-100,-10 -40,-180 -190,-60 -10,-60 -160,-180";
shape.setAttribute('points', svgpoints); shape.setAttribute('points', svgpoints);
var importedPolygon = paper.project.importSvg(shape); var importedPolygon = paper.project.importSVG(shape);
var poly = new Path(); var poly = new Path();
var points = shape.points; var points = shape.points;
@ -369,7 +369,7 @@ test('compare polyline values', function() {
var svgpoints = "5,5 45,45 5,45 45,5"; var svgpoints = "5,5 45,45 5,45 45,5";
shape.setAttribute('points', svgpoints); shape.setAttribute('points', svgpoints);
var importedPolyline = paper.project.importSvg(shape); var importedPolyline = paper.project.importSVG(shape);
var poly = new Path(); var poly = new Path();
var points = shape.points; var points = shape.points;
@ -390,7 +390,7 @@ test('compare negative polyline values', function() {
var svgpoints = "-5,-5 -45,-45 -5,-45 -45,-5"; var svgpoints = "-5,-5 -45,-45 -5,-45 -45,-5";
shape.setAttribute('points', svgpoints); shape.setAttribute('points', svgpoints);
var importedPolyline = paper.project.importSvg(shape); var importedPolyline = paper.project.importSVG(shape);
var poly = new Path(); var poly = new Path();
var points = shape.points; var points = shape.points;

4
test/tests/load.js
View file

@ -44,6 +44,6 @@
/*#*/ include('HitResult.js'); /*#*/ include('HitResult.js');
/*#*/ include('SvgImport.js'); /*#*/ include('SVGImport.js');
/*#*/ include('SvgExport.js'); /*#*/ include('SVGExport.js');
/*#*/ include('JSON.js'); /*#*/ include('JSON.js');