时间戳

首页 > 解决方案 > 如何将 -webkit-clip-path 设置为属性？

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

问题描述

我编写了一些在 Chrome 和 Firefox 中完美运行的代码，但在 Safari 中却不行。碰巧clip-path我必须使用-webkit-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不会转换为-vendor-attribute生成的 HTML。

那么如何-webkit-clip-path使用该功能在 D3 中设置供应商前缀属性（特别是）.attr？

标签： cssxmld3.jssvg

解决方案

由于技术原因，您不能这样做，无论是使用 vanilla JS、D3 还是任何其他工具。通过使用.attr()，您正在尝试创建一个具有 name 的属性-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");

推荐阅读