Question

我正在使用SVG孵化模板进行自定义，内联创建的SVG，这里是小提琴

但是我可以让它动态地工作，而且看起来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中呈现）
第三列应使用第一列创建的掩码

我真的在考虑一个不同的问题，但是当我开始组装小提琴时，结果完全出乎意料......

Answer 1

在标记中，你的面具的rect的宽度/高度为1000.在动态情况下，它是0. I.e。

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

将这些更改为1000并且有效。

动态SVG元素没有正确使用掩码

1 个答案: