如何用Raphaeljs创建一个模式？

我想添加一个网格模式到我的形状，有什么我失踪？这是我补充的方式：我想这可能是因为文件被加载之前，我想补充的格局
这是加入该模式之后的HTML如何用Raphaeljs创建一个模式？

var paper = new Raphael(document.getElementById('canvas_container'), '100%', '100%'); 
$('<pattern id="mygrid" width="10" height="10" patternUnits="userSpaceOnUse">\ 
    <polygon points="5,0 10,10 0,10" stroke="black" />\ 
    </pattern>').appendTo('svg defs'); 

var circle = paper.circle(60, 60, 50); 
circle.attr("fill","url(#mygrid)");

（圈子不作为填充）：

<div id=canvas_container> 
<svg height="100%" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;"> 
    <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.2</desc> 
    <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
     <pattern id="mygrid" width="10" height="10" patternunits="userSpaceOnUse"> 
     <polygon points="5,0 10,10 0,10" stroke="black"></polygon> 
     </pattern> 
     <pattern id="6A35489A-D006-4344-B2A5-C3899E2C21F4" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1" patternTransform="matrix(1,0,0,1,0,0) translate(9.925405384842906,10)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
     <image x="0" y="0" xlink:href="#mygrid" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></image> 
     </pattern> 
    </defs> 
    <circle cx="60" cy="60" r="50" fill="url(#6A35489A-D006-4344-B2A5-C3899E2C21F4)" stroke="#000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle> 
</svg> 
</div>

来源

2013-11-27 shuji

你有SVG 元素在你的页面？ –

@AntoJurkovic是的，我直接从浏览器复制html，所有这些都是用Raphael创建的，我用jQuery添加了模式。 – shuji

[jquery的append可能不会与svg元素一起工作？]（http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element） –

谢谢Robert指着我正确的方向
元素与XHTML命名空间不能被添加在S AME方式等元素
（我不得不创建另一个SVG完全用我的图案，然后将它复制）
这是我做它的工作方式：

var dummy = $('<svg style="display:none"><defs>\ 
    <pattern id="mygrid" width="30" height="30" patternUnits="userSpaceOnUse">\ 
    <polygon points="15,0 30,30 0,30" stroke="black" />\ 
    </pattern></defs></svg>').appendTo('body'); 
$(paper.canvas).append(dummy.find("#mygrid")); //paper.canvas is the svg node 
dummy.remove();

“如果整个SVG文件附加，那么浏览器会自动处理SVG文档中所有元素的名称空间转换。“

或：

var pattern = '<pattern id="mygrid" width="30" height="30" patternUnits="userSpaceOnUse">\ 
    <polygon points="15,0 30,30 0,30" stroke="black" />\ 
    </pattern>'; 
pattern = $.parseHTML('<svg>'+pattern+'</svg>')[0].firstChild; //or childNodes 
$('svg defs').append(pattern);

来源

2013-11-27 19:28:44 shuji

如何用Raphaeljs创建一个模式？

回答

相关问题