Skip to content

Instantly share code, notes, and snippets.

@DaveSanders

DaveSanders/gist:1351731

Created November 9, 2011 15:14
Show Gist options
  • Save DaveSanders/1351731 to your computer and use it in GitHub Desktop.
Save DaveSanders/1351731 to your computer and use it in GitHub Desktop.
Download ZIP
Jquery SVG Bug?
Raw
gistfile1.html
<!DOCTYPE html>
<meta charset='utf-8'>
<html lang="en">
<head>
<link rel="stylesheet" href="jquery.svg.css"/>
<script src="jquery-1.7.min.js"></script>
<script src="jquery.svg.js"></script>
<script src="jquery.svgdom.js"></script>
<style>
body div {display:block;width:300px;height:200px;border:2px solid black;margin:10px;}
</style>
<script>
$(document).ready(function(){
var svg1 = $("#svg1").svg().svg('get');
var svg2 = $("#svg2").svg().svg('get');
var svg3 = $("#svg3").svg().svg('get');
// Test 1 - the one that works
var defs1 = svg1.defs();
var ptn1 = svg1.pattern(defs1, 'patt1', 0, 0, 10, 14, {patternUnits:'userSpaceOnUse'});
svg1.line(ptn1, 0, 0, 8, 12, {strokeWidth:"2", stroke:"blue"});
svg1.line(ptn1, 8, 0, 0, 12, {strokeWidth:"2", stroke:"blue"});
var test1 = svg1.rect(20,20,250,150, {fill:'url(#patt1)', stroke:'#000', strokeWidth:'5px'});
// Test 2 - the one that doesn't
var defs2 = svg2.defs();
var ptn2 = svg2.pattern(defs2, 'patt2', 0, 0, 10, 14, {patternUnits:'userSpaceOnUse'});
svg2.load('<svg width="10" height="14"><line x1="0" y1="0" x2="8" y2="12" stroke-width="2" stroke="blue" /><line x1="8" y1="0" x2="0" y2="12" stroke-width="2" stroke="blue" /></svg>', {addTo:true, parent:ptn2, changeSize:true});
var test2 = svg2.rect(20,20,250,150, {fill:'url(#patt2)', stroke:'#000', strokeWidth:'5px'});
// Test 3 - using a callback doesn't work either
var defs3 = svg3.defs();
var ptn3 = svg3.pattern(defs3, 'patt3', 0, 0, 10, 14, {patternUnits:'userSpaceOnUse'});
svg3.load('<svg width="10" height="14"><line x1="0" y1="0" x2="8" y2="12" stroke-width="2" stroke="blue" /><line x1="8" y1="0" x2="0" y2="12" stroke-width="2" stroke="blue" /></svg>',
{addTo:true, parent:ptn3, changeSize:true, onLoad:function(){
var test3 = svg3.rect(20,20,250,150, {fill:'url(#patt3)', stroke:'#000', strokeWidth:'5px'});
}});
});
</script>
</head>
<body>
<div id="svg1"></div>
<div id="svg2"></div>
<div id="svg3"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment