Fix support for viewBox when importing SVG symbols.

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

View file

@ -12,7 +12,7 @@
<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"
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"/>
</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"/>

View file

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

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,
// otherwise try using canvas.toDataUrl()
var src = this._image && this._image.src;
if (/^data:/.test(src))
if (/^data:/.test(src))
return src;
var canvas = this.getCanvas();
return canvas ? canvas.toDataURL() : null;

View file

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