提取包含所有CSS的SVG代码

btxsgosb 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(84)

我有一个SVG在我的HTML页面，它是使用CSS样式。例如，使用CSS将其fill修改为#F00，并使用CSS对其应用scaleX(-1)变换。使用javascript，我想得到这个修改后的SVG的代码，这样它的fill属性设置为#F00，transform属性设置为scale(-1 1)（注意transform属性的格式与SVG属性语法一致，而不是CSS语法）。
如果没有CSS应用于SVGElement，我将能够通过获取元素的outerHTML来获得SVG代码。但它没有CSS风格。有没有一种方法可以让CSS原生地合并SVG，或者有没有一个库可以做到这一点？

css

来源：https://stackoverflow.com/questions/76544648/extract-svg-code-with-all-the-css-incorporated

1条答案

按热度按时间

nwlqm0z11#

你不需要图书馆。只需在文本编辑器中手动编辑SVG，添加样式块，创建类定义，将CSS规则复制到这些类中，然后将class属性添加到SVG元素中。
SVG元素也可以有一个style属性，就像HTML元素一样。

<svg viewBox="0 0 50 50" width="50" height="50" xmlns="http://www.w3.org/2000/svg">
  <style type="text/css">
    .st0 {
      fill: red;
      stroke-width: 5px;
      stroke: cyan;
    }
  </style>  
  <ellipse class="st0" cx="25" cy="25" rx="20" ry="20"/>
</svg>

赞(0）回复(0）举报 2023-06-25

我来回答

提取包含所有CSS的SVG代码

1条答案

相关问题

热门标签

最新问答