有什么方法可以在绘制到画布中的 svg 的 foreignObject 中使用 css 类？

【问题标题】：Is there any way to use css class in foreignObject of svg which be drawn into canvas?有什么方法可以在绘制到画布中的 svg 的 foreignObject 中使用 css 类？
【发布时间】：2022-01-03 12:40:17
【问题描述】：

有没有办法让我的 html 使用 svg 的 foreignObject 中的类？目前，它只能在每个标签中使用 style 属性，但这太糟糕了:(

我查找了一些将html中的类转换为内联样式的转换器，但是它们都有各种各样的问题。

那么有没有更好的解决方案？

----------------------编辑------------ ------------------

抱歉，我漏掉了一些词，我想将 svg 插入到画布中（通过将其转换为 Blob 然后调用 ctx.drawImage）

【问题讨论】：

作为全局属性，class can be used 几乎适用于任何 HTML 标签，包括 SVG 的 <foreignObject>。
抱歉，更新问题

标签： html css svg

【解决方案1】：

您必须在该 svg 标记内添加一个 style 标记。在该 style 标记中给出的任何样式都将在该 foreignObject 中可用。例如，

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <style>
    .container {
      color: white;
      font: 18px serif;
      height: 100%;
      overflow: auto;
    }
  </style>

  <polygon points="5,5 195,10 185,185 10,195" />

  <!-- Common use case: embed HTML text into SVG -->
  <foreignObject x="20" y="20" width="160" height="160">
    <!--
      In the context of SVG embedded in an HTML document, the XHTML
      namespace could be omitted, but it is mandatory in the
      context of an SVG document
    -->
    <div xmlns="http://www.w3.org/1999/xhtml" class="container">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Sed mollis mollis mi ut ultricies. Nullam magna ipsum,
      porta vel dui convallis, rutrum imperdiet eros. Aliquam
      erat volutpat.
    </div>
  </foreignObject>
</svg>

来源MDN Web Docs - foreignObject

【讨论】：