如何将 -webkit-clip-path 设置为属性?

Question

我写了一些在Chrome和Firefox中完美运行的代码，但在Safari中则不然。碰巧我必须使用-webkit-clip-path而不是使用clip-path属性。但是，当我尝试在 D3 中设置此属性时，setAttribute函数出现错误。例：

this._path = this._curve.insert('path')
.attr('d', this._line(chronicle))
.attr("clip-path", "url(#clip)")
.attr("-wekbit-clip-path", "url(#clip)") // ERROR HERE
.attr("class", "curve")
.attr("stroke", "orange");

错误是：InvalidCharacterError: The string contains invalid characters.

我发现当你在JavaScript中使用供应商前缀时，它们有一个特殊的名称。但是，在.attr函数中使用该特殊名称不会转换为生成的 HTML 中的-vendor-attribute。

那么如何使用.attr函数在 D3 中设置供应商前缀属性(-webkit-clip-path特别是(呢？

Answer 1

由于技术原因，无论是使用vanilla JS，D3还是任何其他工具，您都不能这样做。通过使用.attr()，您正在尝试创建名称为-wekbit-clip-path的属性。但是，由于 SVG 是 XML 语法，则XML 名称生成规则适用。对于 XML 属性，名称开始字符定义为：

NameStartChar  ::=  ":" | [A-Z] | "_" | [a-z] | [#xC0-#xD6] | [#xD8-#xF6] | [#xF8-#x2FF] |
[#x370-#x37D] | [#x37F-#x1FFF] | [#x200C-#x200D] | [#x2070-#x218F] |
[#x2C00-#x2FEF] | [#x3001-#xD7FF] | [#xF900-#xFDCF] | [#xFDF0-#xFFFD] |
[#x10000-#xEFFFF]

这排除了使用连字符(-(作为起始字符的可能性。

不过，解决方案相当简单，只需使用.style()将其设置为样式属性：

this._path = this._curve.insert('path')
.attr('d', this._line(chronicle))
.attr("clip-path", "url(#clip)")
.style("-wekbit-clip-path", "url(#clip)") // set as a style property
.attr("class", "curve")
.attr("stroke", "orange");