Css 如何将-webkit剪辑路径设置为属性？

我写了一些代码，在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:字符串包含无效字符。

我发现，在JavaScript中使用供应商前缀时，它们有一个特殊的名称。但是在

.attr

函数中使用该特殊名称不会在生成的HTML中转换为

-vendor属性

那么，如何使用
.attr
功能在D3中设置供应商前缀属性（
-webkit clip path
），因为技术原因，无论是使用vanilla JS、D3还是任何其他工具，都不能这样做。通过使用，您试图创建一个名为
-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]

这就排除了使用连字符（
-
）作为开始字符的可能性

不过，解决方案相当简单，只需使用以下命令将其设置为样式属性：

出于技术原因，您不能这样做，无论是使用vanilla JS、D3还是任何其他工具。通过使用，您试图创建一个名为
-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]

这就排除了使用连字符（
-
）作为开始字符的可能性

不过，解决方案相当简单，只需使用以下命令将其设置为样式属性：

非常感谢。我想我可以自己解决这个问题：-）。它无论如何都不起作用：似乎D3检查属性的有效性。如果我键入
.style（“笔划”、“红色”）
，我可以在生成的元素中找到样式（使用导航器的检查器）。如果我键入
.style（“foothebar”、“red”）
，则什么也不会发生。对于
.style（“-wekbit clip path”，“url（#clip）”）也一样。
。。。我保留了我的解决方法，我直接在包含SVG画布的HTML文件中设置样式。谢谢。我想我可以自己解决这个问题：-）。它无论如何都不起作用：似乎D3检查属性的有效性。如果我键入
.style（“笔划”、“红色”）
，我可以在生成的元素中找到样式（使用导航器的检查器）。如果我键入
.style（“foothebar”、“red”）
，则什么也不会发生。对于
.style（“-wekbit clip path”，“url（#clip）”）也一样。
。。。我保留了我的解决方法，我直接在包含SVG画布的HTML文件中设置样式。