scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-07-10 19:54:27 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix support for viewBox when importing SVG symbols.

Browse source
This commit is contained in:
Jürg Lehni 2013-03-01 10:08:17 -08:00
parent 12d4d563d9
commit 01026c0896
4 changed files with 12 additions and 9 deletions

2
examples/SVG Import/Symbols.html
View file

@ -12,7 +12,7 @@
<body> <body>
<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="595" height="841" xml:space="preserve"> width="595" height="841" xml:space="preserve">
<symbol id="circle" viewBox="-24 -24 48 48"> <symbol id="circle" viewBox="0 0 48 48" overflow="visible">
<path fill="#FF0049" d="M24,0c0-13.255-10.745-24-24-24S-24-13.255-24,0s10.745,24,24,24S24,13.255,24,0z"/> <path fill="#FF0049" d="M24,0c0-13.255-10.745-24-24-24S-24-13.255-24,0s10.745,24,24,24S24,13.255,24,0z"/>
</symbol> </symbol>
<use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(1.1667 1.1667 1.1667 -1.1667 177.0005 96)" overflow="visible"/> <use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(1.1667 1.1667 1.1667 -1.1667 177.0005 96)" overflow="visible"/>

1
src/item/PlacedSymbol.js
View file

@ -24,6 +24,7 @@ var PlacedSymbol = this.PlacedSymbol = PlacedItem.extend(/** @lends PlacedSymbol
_serializeFields: { _serializeFields: {
symbol: null symbol: null
}, },
/** /**
* Creates a new PlacedSymbol Item. * Creates a new PlacedSymbol Item.
* *

2
src/item/Raster.js
View file

@ -276,7 +276,7 @@ var Raster = this.Raster = PlacedItem.extend(/** @lends Raster# */{
// See if the linked image is base64 encoded already, if so reuse it, // See if the linked image is base64 encoded already, if so reuse it,
// otherwise try using canvas.toDataUrl() // otherwise try using canvas.toDataUrl()
var src = this._image && this._image.src; var src = this._image && this._image.src;
if (/^data:/.test(src)) if (/^data:/.test(src))
return src; return src;
var canvas = this.getCanvas(); var canvas = this.getCanvas();
return canvas ? canvas.toDataURL() : null; return canvas ? canvas.toDataURL() : null;

16
src/svg/SvgImport.js
View file

@ -379,20 +379,23 @@ new function() {
viewBox: function(item, value, name, node) { viewBox: function(item, value, name, node) {
// http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute // http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute
// TODO: implement preserveAspectRatio attribute // TODO: implement preserveAspectRatio attribute
if (item instanceof Symbol)
return;
var values = convertValue(value, 'array'), var values = convertValue(value, 'array'),
rectangle = Rectangle.create.apply(this, values), rectangle = Rectangle.create.apply(this, values),
size = getSize(node, 'width', 'height', true), size = getSize(node, 'width', 'height', true),
scale = size ? rectangle.getSize().divide(size) : 1, scale = size ? rectangle.getSize().divide(size) : 1,
offset = rectangle.getPoint(), offset = rectangle.getPoint(),
matrix = new Matrix().translate(offset).scale(scale); matrix = new Matrix().translate(offset).scale(scale);
item.transform(matrix.inverted());
if (size) if (size)
rectangle.setSize(size); rectangle.setSize(size);
rectangle.setPoint(0); if (item instanceof Symbol) {
// TODO: the viewbox does not always need to be clipped matrix.translate(rectangle.getSize().divide(-2));
return createClipGroup(item, new Path.Rectangle(rectangle)); item._definition.transform(matrix);
} else {
item.transform(matrix.inverted());
rectangle.setPoint(0);
// TODO: the viewBox does not always need to be clipped
return createClipGroup(item, new Path.Rectangle(rectangle));
}
} }
}); });
@ -467,7 +470,6 @@ new function() {
return item; return item;
} }
Item.inject(/** @lends Item# */{ Item.inject(/** @lends Item# */{
/** /**
* Converts the passed node node into a Paper.js item and adds it to the * Converts the passed node node into a Paper.js item and adds it to the