如何使用 Raphaeljs 创建模式？答案

【问题标题】：How to create a pattern with Raphaeljs?如何使用 Raphaeljs 创建模式？
【发布时间】：2015-09-17 08:58:19
【问题描述】：

我正在尝试为我的形状添加一个网格图案，有什么我遗漏的吗？这是我添加它的方式：

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>

【问题讨论】：

你的页面中有 svg 元素吗？
@AntoJurkovic 是的，我直接从浏览器复制了 html，所有这些都是用 Raphael 创建的，我用 jQuery 添加了模式。
jquery's append not working with svg element?的可能重复

标签： javascript jquery svg raphael

【解决方案1】：

感谢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);

【讨论】：