将css样式表应用于内联svg元素,而不将其加载到页面上
Apply css stylesheet to inline svg element without loading it on the page
这里我想做的是通过查找其类并根据样式表中定义的属性将样式内联应用于元素,将内联css样式表应用于页面上的相关svg元素。
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW X6 -->
<svg
xmlns="http://www.w3.org/2000/svg"
xml:space="preserve"
width="3.237in"
height="3.157in"
version="1.1"
style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 3237 3157"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style
type="text/css">
<![CDATA[
.str0 {stroke:#373435;stroke-width:4.16694;stroke-linejoin:round}
.fil3 {fill:none}
.fil0 {fill:#373435}
.fil1 {fill:#FEFEFE}
.fil2 {fill:#FEFEFE;fill-rule:nonzero}
]]>
</style>
</defs>
<path
id="_261044752"
class="fil0"
d="M267.784 510.417c106.059,-65.5195 214.002,-181.006 171.579,-314.403l-4.24253 -10.8414c-20.7402,-45.723 -69.7632,-62.6919 -116.429,-46.6655 -20.7402,8.95633 -34.8804,21.6839 -50.908,36.7667l-8.95515 8.48507 -8.48507 -8.48507c-16.0264,-15.0827 -30.1678,-27.8103 -51.3793,-36.7667 -46.1942,-16.0264 -95.216,0.942523 -115.956,46.6655l-4.24253 10.8414c-13.6701,42.8954 -11.7851,84.3759 0.942523,122.556 0,0.471261 0,0.471261 0,0.942523 1.41378,3.77127 2.82757,7.54254 4.24253,11.3138 29.2241,74.9471 98.0448,137.639 166.393,179.591l8.95633 5.6575 8.48388 -5.6575z"
/>
</svg>
*所以这里的代码类"fil0"应该在样式表及其属性中搜索,即"fill:#3373435;"应作为内联样式应用于"path"*
我尝试过使用正则表达式,但没有得到任何有用的东西。
可能是这样的吗?
<script>
var stylesheet = document.styleSheets[0];
var fil0 = stylesheet.cssRules[2].cssText;
var path = document.getElementById("_261044752");
path.removeAttribute("class");
path.setAttribute("style", fil0.substring(fil0.indexOf("{") + 1,fil0.lastIndexOf("}")).trim());
</script>
如果你想用很多元素来实现这一点,你可以调用document.getElementsByClassName("fil0")并循环遍历结果。
相关文章:
- 一个变化:在加载图像之前加载元素
- 移除/阻止将来在DOM中加载元素
- 在没有事件的情况下对具有特定类的已加载元素激发函数
- JQuery - 加载元素时的过程元素
- 从特定 Div JS 加载元素
- 使用javascript加载元素,然后应用它们javascript
- 聚合物 1.x:预加载元素属性
- 聚合物 1.x:预加载元素属性
- Django - 通过 AJAX 重新加载元素
- 在 jquery 插件中放置一个 Raphael “加载”元素
- 将事件绑定到页面上的动态加载元素
- jQuery-使用ajax加载元素
- 使用javascript动态加载元素的性能
- 如何在我们知道 ajax 加载元素的真实高度(带有图像)后立即执行脚本
- CSS在动态和直接通过服务器加载元素时出现负边距差异
- Jquery从外部脚本加载元素
- 在ajax中加载元素
- 在聚合物中加载数据后重新加载元素
- 如何使用js加载元素
- 一个接一个地加载元素——简单的jQuery