添加css all时SVG不渲染<path>：revert答案

【问题标题】：Svg not render <path> when added css all:revert添加css all时SVG不渲染<path>：revert
【发布时间】：2021-12-10 05:46:41
【问题描述】：

我正在使用 3rd 方 UI 库，其中包含这样的规则：

* {all: revert;}

然后我添加 svg，但它不是渲染，因为 <path> 的 width and height 等于 0。我无法删除代码中的all: revert;（只能覆盖）。

这里是演示： https://codesandbox.io/s/suspicious-cori-4pgfh

<path> 需要添加什么样式才能使其可见？

UPD：这里是代码 sn-p

body {
  font-family: sans-serif;
}

/* this cannot be removed  */
body * {
  all: revert; /* this added by 3-rd party library */
}

.svg-wrapper * {
  display: block;
  width: 100px;
  height: 100px;
}

.svg-wrapper path {
  display: block;
  width: 100px;
  height: 100px;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="svg-wrapper">
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M 10,30
                         A 20,20 0,0,1 50,30
                         A 20,20 0,0,1 90,30
                         Q 90,60 50,90
                         Q 10,60 10,30 z"
        />
      </svg>
    </div>

  </body>
</html>

UPD：当用 body * { all: initial; } 覆盖时 - 不起作用

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。
...但如果你可以覆盖body * { all: initial; }
谢谢，添加了代码 sn-p。如果覆盖body * { all: initial; } - 不起作用
也许您最好通过 iframe 或对象标签显示您的 SVG 内容。

标签： css svg

【解决方案1】：

all: revert; 重置的是 d 数据（现在也是 CSS 属性），并且由于 CSS 属性始终覆盖 SVG 属性，因此您的 <path> 不再包含形状。

我能找到的唯一解决方法是运行一个脚本，将d SVG 属性 复制到所有<path> 元素上的d CSS 属性 中：

document.querySelectorAll('path').forEach(path => {
  const data = path.getAttribute('d').replace(/\s+/g, ' '),
        cssData = `path("${data}")`;
  path.style.d = cssData;
});

document.querySelectorAll('path').forEach(path => {
  const data = path.getAttribute('d').replace(/\s+/g, ' '),
        cssData = `path("${data}")`;
  path.style.d = cssData;
});

body {
  font-family: sans-serif;
}

/* this cannot be removed  */
body * {
  all: revert; /* this added by 3-rd party library */
}

.svg-wrapper * {
  display: block;
  width: 100px;
  height: 100px;
}

.svg-wrapper path {
  display: block;
  width: 100px;
  height: 100px;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="svg-wrapper">
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M 10,30
                         A 20,20 0,0,1 50,30
                         A 20,20 0,0,1 90,30
                         Q 90,60 50,90
                         Q 10,60 10,30 z"
        />
      </svg>
    </div>

  </body>
</html>

【讨论】：

谢谢！我的原始解决方案。 (+) 很好的答案。