通过 
搜索
搜索recrit / svg-style-scoper
将 SVG 标记内的样式范围限制，以避免 SVG 样式影响其他 SVG 或页面上的其他元素。
v2.0.0-beta2
2024-04-15 22:50 UTC
Requires
- php: ^7.0 || ^8.0
- ext-dom: *
- ext-libxml: *
Suggests
- enshrined/svg-sanitize: SVG sanitizer for PHP
This package is auto-updated.
Last update: 2024-09-15 23:44:42 UTC
README
将 SVG 内联标记内的样式范围限制，以避免样式影响页面上的其他内联 SVG 或其他元素。
问题
一个网站希望允许用户上传 SVG 文件并将其作为内联 SVG 标记显示在网站上。内容编辑员经常使用相同的应用程序创建 SVG，这会导致多个 SVG 在同一页面中使用相同的 HTML 类。页面最后显示的内联 SVG 将覆盖使用相同类别的所有其他 SVG 的样式。
示例：页面上所有使用类 "cls-0" 的元素都会有白色填充。
<style type="text/css">
.cls-0 {fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
</style>
解决方案
具有 "scoped" 属性的 style 标签已被弃用，因此不能用于限制 SVG 样式的范围。
此库修改 SVG 样式，使其仅适用于 SVG 内容。
- SVG 的 style 标签内所有的样式声明都会附加一个哈希值。具体来说，只有以类和 ID 基样式开始的样式。下面是 SVG 样式的所有更改。
- 附加的哈希值使样式对于 SVG 和页面上显示的任何其他完全相同的内联 SVG 都是唯一的。
- 附加的哈希值保留了原始 CSS 选择器的特定性。保持相同的特定性使得任何页面级别的样式（不在 SVG 中）能继续按预期工作。页面级别样式示例：站点主题更改 SVG 路径的颜色。