scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2024-12-29 09:22:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

SVG Importer: support percentage values for gradient stop offset.

Browse source
This commit is contained in:
Jonathan Puckey 2012-11-08 15:55:24 +01:00
parent 328763ef90
commit 71d3cca2d8
2 changed files with 28 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
examples/SVG Import/Symbols.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Multiple Paths Test 2</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSvg(document.getElementById('svg'));
</script>
</head>
<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.28px" height="841.89px" viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
<symbol id="circle" viewBox="-24 -24 48 48">
<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"/>
<use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(0.5625 0 0 -0.5625 92 152)" overflow="visible"/>
<use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(2.2415 -2.0119 -2.0119 -2.2415 176.9971 246.9941)" overflow="visible"/>
<use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(1 0 0 -1 84 65)" overflow="visible"/>
</svg>
<canvas id="canvas" width="500px" height="1000px"></canvas>
</body>
</html>

4
src/svg/SvgImport.js
View file

@ -417,7 +417,9 @@ new function() {
// http://www.w3.org/TR/SVG/pservers.html#StopElementOffsetAttribute
// TODO: this can be a string with % at the end
case 'offset':
item.setRampPoint(parseFloat(value, 10));
var isPercentage = value[value.length - 1] == '%';
value = parseFloat(isPercentage ? value.slice(0, -1) : value, 10);
item.setRampPoint(isPercentage ? value / 100 : value);
break;
case 'xlink:href':
item = definitions[value.substr(1)].clone();