如何将 -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 attributes，name start character 定义为：

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");