Javascript 如何使用Raphaeljs创建图案?
我正在尝试为我的形状添加一个网格图案,有什么我遗漏的吗?这是我添加它的方式:Javascript 如何使用Raphaeljs创建图案?,javascript,jquery,svg,raphael,Javascript,Jquery,Svg,Raphael,我正在尝试为我的形状添加一个网格图案,有什么我遗漏的吗?这是我添加它的方式: var paper=new Raphael(document.getElementById('canvas_container'),'100%,'100%); $('\ \ .appendTo('svg defs'); var循环=纸张循环(60,60,50); circle.attr(“fill”,“url(#mygrid)”); 我想这可能是因为在我添加模式之前加载了文档 这是添加模式后的html(圆圈未填充)
var paper=new Raphael(document.getElementById('canvas_container'),'100%,'100%);
$('\
\
.appendTo('svg defs');
var循环=纸张循环(60,60,50);
circle.attr(“fill”,“url(#mygrid)”);
我想这可能是因为在我添加模式之前加载了文档这是添加模式后的html(圆圈未填充):
使用Raphaël 2.1.2创建
谢谢你为我指明了正确的方向不能以与其他元素相同的方式添加具有xhtml命名空间的元素
(我必须完全用我的模式创建另一个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();
var dummy=$('\
\
\
)。附于(‘主体’);
$(paper.canvas).append(dummy.find(“#mygrid”)//paper.canvas是svg节点
dummy.remove();
“如果附加了整个SVG文档,那么浏览器将自动处理SVG文档中所有元素的名称空间转换。”或:
var模式=”\
\
';
pattern=$.parseHTML(“”+pattern+“”)[0].firstChild//或子节点
$('svg defs').append(模式);
您的页面中有svg元素吗?@AntoJurkovic是的,我直接从浏览器复制了html,所有这些都是用Raphael创建的,我用jQuery添加了模式。可能是
<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>
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();
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);