CSS 改变 <path> 的 d 属性答案

【问题标题】：CSS change d property of <path>CSS 改变 <path> 的 d 属性
【发布时间】：2017-07-02 19:02:49
【问题描述】：

我有一个生成的 svg 路径代码，我想用 CSS 文件覆盖它以更改 svg 形状。我可以覆盖除“d”之外的所有属性：

这里是生成的代码（我不能直接改）：

<div id="map_outer" style="position: absolute; left: 3px; z-index: 1;">
<svg height="35" version="1.1" width="35" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.0</desc>
<defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
</defs>
<path fill="#cecece" stroke="#808080" d="M503.7,743.8C694,647.1999999999999,636.6,326.74999999999994,348.1,334.09V205.39L120.00000000000003,400.39L348.1,606.19V474.59000000000003C589,469.09000000000003,578,677.3900000000001,503.70000000000005,743.8900000000001Z" stroke-width="40" stroke-opacity="1" fill-opacity="1" transform="matrix(0.05,0,0,0.05,-1.9,-5.7)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 1; fill-opacity: 1; cursor: pointer;">
</path>
</svg>
</div>

这是覆盖d值的CSS，我明白了

未知属性名称

在 CSS 检查器中！！！：

#map_outer svg path{
    fill: rgb(255, 204, 0) !important;
    d:"M 850 300 C 850 300 350 300 350 300 L 348.1 205.39 L 120 400.39 L 348.1 606.19 L 350 500 C 850 500 850 500 850 500 z" !important;
    stroke-width: 0;
}

【问题讨论】：

你不能用 CSS 做到这一点。 CSS 不是为此而设计的。您将不得不使用 JavaScript，然后该过程变得微不足道。如果您需要为此使用 CSS 选择器，请尝试使用 jQuery。
你确定任何 UI 都支持 d 作为 CSS 属性吗？此 Chrome 错误仍在进行中：bugs.chromium.org/p/chromium/issues/detail?id=652822。我认为你甚至超越了这里的前沿。
@MuhammadUsman 在 JS 或 JQuery 中有什么办法吗？
不幸的是，这在 FF 中不起作用

标签： css svg

【解决方案1】：

您几乎在正确的轨道上，您只需要为属性设置正确的值。它缺少 path('..')：

#map_outer svg path {
    d: path('M 850 300 C 850 300 350 300 350 300 L 348.1 205.39 L 120 400.39 L 348.1 606.19 L 350 500 C 850 500 850 500 850 500 z') !important;
}

【讨论】：

1000 谢谢你，你拯救了我的一天。我整天都在这个烂摊子中
我不知道这个把戏，不错。我打算采用<script>document.body.onload=function(){document.getElementById("map_outer").getElementsByTagName("path")[0].setAttribute("d", "M 0 0 L 0 50 L 50 50")};</script> 方式。
一旦 Chrome 为 d bugs.chromium.org/p/chromium/issues/detail?id=652822 实现了正确的语法，它就会中断
它目前只能在基于 Chrome 的浏览器中运行，其他任何地方都没有。（但无论如何，这句话很酷，@brendonofficial！）
Firefox 将从 93 版本开始支持样式中的路径数据。规范已更改，因此这应该是未来的证明。

【解决方案2】：

将id 添加到您的<path d="..."></path>，然后添加带有新路径的JavaScript 代码：

<svg>
  <path d="..." id="myPath></path>
</svg>
<script>
  document.getElementById("myPath").setAttribute("d", "M 0 0 L 0 50 L 50 50");
</script>

这是一个例子：

<html>
  <body>
    <svg>
      <path d="M 0 0 L 50 0 L 50 50" id="myPath" />
    </svg>
    <script>
      document.getElementById("myPath").setAttribute("d", "M 0 0 L 0 50 L 50 50");
    </script>
  </body>
</html>

【讨论】：

我不能改代码，它是由一个复杂的JS文件生成的，这个JS文件也影响了其他工作人员。所以我只能在这段代码之外进行管理
<path> 是否有任何id 或从 JS 获取的方式？
只有#map_outer div 有id
好吧，我想就这样。给我一点时间，我可以更改代码...