javascript - 在 svg 代码中声明的样式标签会影响其他 svg 代码
问题描述
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 119.17 130.62">
<defs>
<style>
.cls-1 {
fill: #231f20;
}
</style>
</defs>
<g id="레이어_2" data-name="레이어 2">
<g id="Layer_1" data-name="Layer 1">
<path class="cls-1" d="M115.91,3.25A3.89,3.89,0,0,0,111.6,0c-4.26.39-5.44.4-7.5,2.94a3.84,3.84,0,0,0-3.9,1.4,51.32,51.32,0,0,0-5.8,10,3.65,3.65,0,0,0-3.33,2.34A338.79,338.79,0,0,0,78.56,57.54c-1.41,4.9-2.79,9.8-4,14.73-3.6,9.47-6.32,19-6.55,29.41C62.26,95.14,55.6,89.29,49.43,83.31,44.1,78.13,38.32,72.24,32.16,66.8c-6-7.71-13.57-13.63-24.48-15.65a4.27,4.27,0,0,0-.8,0c-.1,0-.18,0-.29,0H3.76c-4,0-4.85,5.19-2.37,7.5,22.23,20.73,35.9,48.83,59.6,68.11,3.11,2.53,6.83-.26,7-3.31.06.33.11.66.18,1s-.08.78-.1,1.17c-.17,3.92,4.54,7.07,7.46,3.46,13.16-16.29,11.22-38.72,17.64-57.73,3-8.92,6.5-18,9.34-27.27,3.89-9.68,8-19.28,12.68-28.54a4.27,4.27,0,0,0,.69-.95c.94-1.89,1.89-3.79,2.84-5.68C120.09,6.06,118.24,3.84,115.91,3.25ZM30.24,77.56q2.29,3.42,4.38,7.16Q30.9,79.83,27.13,75C28.16,75.83,29.19,76.68,30.24,77.56ZM66.46,120.2c-8.56-7-14.19-17.4-19.59-28,8.75,8.13,16.4,16,20.15,21.61a52.41,52.41,0,0,0,.62,7.91A4.27,4.27,0,0,0,66.46,120.2Z"></path>
</g>
</g>
</svg>
有这个svg代码,这个svg代码有一个style标签
此样式标签内编写的代码会影响其他 svg 代码。
不可能简单地将诸如“cls-1”之类的类名更改为“cls-2”。因为 svg 超过一千,我需要另一个解决方案。有没有人解决过这个问题?
解决方案
您的 svgid
是独一无二的,因此您可以尝试将样式附加到它们:
<svg xmlns="http://www.w3.org/2000/svg" width="50px" viewBox="0 0 119.17 130.62"><defs><style>#레이어_2{fill:yellow;}</style></defs><g id="레이어_2" data-name="레이어 2"><g id="Layer_1" data-name="Layer 1"><path class="cls-1" d="M115.91,3.25A3.89,3.89,0,0,0,111.6,0c-4.26.39-5.44.4-7.5,2.94a3.84,3.84,0,0,0-3.9,1.4,51.32,51.32,0,0,0-5.8,10,3.65,3.65,0,0,0-3.33,2.34A338.79,338.79,0,0,0,78.56,57.54c-1.41,4.9-2.79,9.8-4,14.73-3.6,9.47-6.32,19-6.55,29.41C62.26,95.14,55.6,89.29,49.43,83.31,44.1,78.13,38.32,72.24,32.16,66.8c-6-7.71-13.57-13.63-24.48-15.65a4.27,4.27,0,0,0-.8,0c-.1,0-.18,0-.29,0H3.76c-4,0-4.85,5.19-2.37,7.5,22.23,20.73,35.9,48.83,59.6,68.11,3.11,2.53,6.83-.26,7-3.31.06.33.11.66.18,1s-.08.78-.1,1.17c-.17,3.92,4.54,7.07,7.46,3.46,13.16-16.29,11.22-38.72,17.64-57.73,3-8.92,6.5-18,9.34-27.27,3.89-9.68,8-19.28,12.68-28.54a4.27,4.27,0,0,0,.69-.95c.94-1.89,1.89-3.79,2.84-5.68C120.09,6.06,118.24,3.84,115.91,3.25ZM30.24,77.56q2.29,3.42,4.38,7.16Q30.9,79.83,27.13,75C28.16,75.83,29.19,76.68,30.24,77.56ZM66.46,120.2c-8.56-7-14.19-17.4-19.59-28,8.75,8.13,16.4,16,20.15,21.61a52.41,52.41,0,0,0,.62,7.91A4.27,4.27,0,0,0,66.46,120.2Z"></path></g></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="50px" viewBox="0 0 119.17 130.62"><defs></defs><g id="레이어_3" data-name="레이어 3"><g id="Layer_1" data-name="Layer 1"><path class="cls-2" d="M115.91,3.25A3.89,3.89,0,0,0,111.6,0c-4.26.39-5.44.4-7.5,2.94a3.84,3.84,0,0,0-3.9,1.4,51.32,51.32,0,0,0-5.8,10,3.65,3.65,0,0,0-3.33,2.34A338.79,338.79,0,0,0,78.56,57.54c-1.41,4.9-2.79,9.8-4,14.73-3.6,9.47-6.32,19-6.55,29.41C62.26,95.14,55.6,89.29,49.43,83.31,44.1,78.13,38.32,72.24,32.16,66.8c-6-7.71-13.57-13.63-24.48-15.65a4.27,4.27,0,0,0-.8,0c-.1,0-.18,0-.29,0H3.76c-4,0-4.85,5.19-2.37,7.5,22.23,20.73,35.9,48.83,59.6,68.11,3.11,2.53,6.83-.26,7-3.31.06.33.11.66.18,1s-.08.78-.1,1.17c-.17,3.92,4.54,7.07,7.46,3.46,13.16-16.29,11.22-38.72,17.64-57.73,3-8.92,6.5-18,9.34-27.27,3.89-9.68,8-19.28,12.68-28.54a4.27,4.27,0,0,0,.69-.95c.94-1.89,1.89-3.79,2.84-5.68C120.09,6.06,118.24,3.84,115.91,3.25ZM30.24,77.56q2.29,3.42,4.38,7.16Q30.9,79.83,27.13,75C28.16,75.83,29.19,76.68,30.24,77.56ZM66.46,120.2c-8.56-7-14.19-17.4-19.59-28,8.75,8.13,16.4,16,20.15,21.61a52.41,52.41,0,0,0,.62,7.91A4.27,4.27,0,0,0,66.46,120.2Z"></path></g></g></svg>
推荐阅读
- firebase - Firebase ShortDynamicLink not completing task
- javascript - 当我使用 onSelectRow 事件时,jqgrid 编辑按钮链接不起作用
- r - 计算非线性模型的置信区间:predictNLS 中的错误
- amazon-s3 - 是否可以拍摄 OpenEBS Jiva 实时卷的 S3 快照?如果是这样,怎么做?
- google-cloud-platform - 从现有模板在 Google Cloud Platform 中创建实例模板
- typo3 - Site management and application context TYPO3 9
- angular - angular waiting several subscribe to do something
- coldfusion - 使用 Coldfusion 将表单输入传递到外部 URL
- bash - 在 for 循环中嵌套 case 语句
- shell - jq 内置方法 select():找不到命令