我使用的是第三方UI库，它包含这样的规则:
* {all: revert;}
然后我添加svg，但它不是渲染，因为<path>的width and height等于0。我无法在代码中删除all: revert;(仅覆盖)。
下面是demo:https://codesandbox.io/s/suspicious-cori-4pgfh
需要添加什么样式到<path>使其可见?
UPD:这里的代码片段
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; }-不工作
这是d的数据(这也是一个CSS属性现在)得到重置的all: revert;，因为CSS属性总是覆盖SVG属性，你的<path>不包含形状了
我能找到的唯一修复是运行一个脚本，复制dSVG属性到所有<path>元素的dCSS属性:
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>*:not(path) {all: revert;}将应用恢复，但保持SVG路径完整