我正在使用第 3 方 UI 库，其中包含以下规则：
* {all: revert;}
然后我添加 svg，但它不会渲染，因为width and heightof<path>等于 0。我无法 all: revert;在代码中删除（只能覆盖）。
这是演示： https: //codesandbox.io/s/suspicious-cori-4pgfh
需要添加什么样式<path>才能使其可见？
UPD：这里是代码片段
* {all: revert;}
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;
}UPD：当用body * { all: initial; }- 覆盖时不起作用
它是d由 重置的数据（现在也是 CSS 属性）all: revert;，并且由于 CSS 属性始终覆盖 SVG 属性，因此您<path>不再包含形状。
我能找到的唯一修复方法是运行一个脚本，将d SVG 属性复制到所有元素的d CSS 属性<path>中：
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>| 归档时间： |
|
| 查看次数： |
362 次 |
| 最近记录： |