如何使用Raphaeljs创建图案
How to create a pattern with Raphaeljs?
我正在尝试为我的形状添加网格模式,是不是缺少了什么?这是我添加的方式:
**Fiddle**
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)");
我想这可能是因为在添加模式之前已经加载了文档
这是添加图案后的html(圆圈未填充):
<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>
感谢Robert为我指明了正确的方向
具有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();
"如果附加了整个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);
相关文章:
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 为effect Composer创建GodRays效果过程
- 从javascript创建一个列表
- onkeyup无法动态创建多个文本区域
- 如何使用javascript从主svg对象动态创建svg视图框
- 如何访问声音管理器2创建的声音对象
- 我已经创建了一个jquery转盘,并使用if条件来运行和停止转盘
- Kendo:我该如何在树视图中创建一个递归的hieiarchy
- 使用Facebook live API创建实时视频对象时的隐私设置
- 在动态创建的元素上获取对特定选择器的引用
- 如何创建带有插槽的vue js组件预加载程序
- 如何在创建键时引用来自同一对象的键
- 如何创建JSON数组
- 从html创建一个指令,该指令按类名应用函数
- 如何使用Raphaeljs创建图案
- 如何在 RaphaelJS 中根据需要为文本创建默认属性并链接其他属性
- 在 RaphaelJS 中创建复杂的文本节点
- 如何将文本插入到由 raphaeljs 创建的节点中
- RaphaelJS HTML5库:创建一个带有文本并在鼠标悬停时发光的按钮
- RaphaelJS/Javascript更新路径,而不是创建新的