javascript - 动态 SVG 元素未正确使用 mask

Question

我正在为我的自定义、内联创建的 SVG 使用 SVG 填充 mask ，这是 fiddle

http://jsfiddle.net/m3jrm1ow/

但我可以让它动态工作，而且 firefox 的渲染方式似乎与 chrome 不同？我查看了生成的代码，但我只能说存在 url() 函数问题

只有当它从静态创建的掩码 ID 中获取 url 时，中间列才会正确孵化

<svg width="0" height="0">
    <defs>
        <pattern height="3" width="3" patternUnits="userSpaceOnUse" id="stripe1">
            <line y2="0" x2="3" y1="3" x1="0" stroke-width="1px" stroke="white" fill="white"></line>
        </pattern>
        <mask maskUnits="userSpaceOnUse" id="mask1">
            <rect fill="url(#stripe1)" height="1000" width="1000"></rect>
        </mask>
    </defs>
</svg>

所以我希望所有列在所有浏览器上呈现相同，

• 第一列应使用动态掩码动态创建
• 第二列应按原样呈现(现在不在 chrome 中呈现)
• 第三列应该使用第一列创建的掩码

我真的在研究一个有点不同的问题，但是当我开始组装 fiddle 时，结果完全不正常......

Answer 1

在标记中，您的掩码矩形的宽度/高度为 1000。在动态情况下为 0。即

.attr("width", "0")
.attr("height", "0")

将这些更改为 1000 即可。