foreignObject

• foreignObject
  • 用途
    • 下载文字
  • 兼容（目前已知）
    • 13.1.3 safari浏览器下载时text-shadow不生效
  • 注意
    • 特殊字体下载需要生成base64插入到style里面不能使用链接直接引用，会不生效
  • 用法

    • const url = `data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
            <style type="text/css">body,div{padding:0;margin:0}</style>
            <text style="position: absolute;left: 0;top: 0;transform-origin: 0 0;width: 805px;line-height: 1.2;font-size: 145.0898832px;word-wrap: break-word;font-weight: normal;white-space: pre-wrap;text-align: left;writing-mode: horizontal-tb;font-style: normal;text-decoration:  ;letter-spacing: -11.61px;opacity: 1;transform: scale(1);height: auto;-webkit-text-stroke: 9.0681177px rgba(255,255,255,1);-webkit-text-shadow: 11.320643703341581px 9.840885434857608px 0px rgba(56,62,196,1);text-shadow: 11.320643703341581px 9.840885434857608px 0px rgba(56,62,196,1)">照片中的童年</text>
            <foreignObject width="100%" height="100%">
              <div xmlns='http://www.w3.org/1999/xhtml'>
                <style type="text/css">body,div{padding:0;margin:0}</style>
                <div style="position: absolute;left: 0;top: 0;transform-origin: 0 0;width: 805px;line-height: 1.2;font-size: 145.0898832px;word-wrap: break-word;font-weight: normal;white-space: pre-wrap;text-align: left;writing-mode: horizontal-tb;font-style: normal;text-decoration:  ;letter-spacing: -11.61px;opacity: 1;transform: scale(1);height: auto;-webkit-text-stroke: 9.0681177px rgba(255,255,255,1);-webkit-text-shadow: 11.320643703341581px 9.840885434857608px 0px rgba(56,62,196,1);text-shadow: 11.320643703341581px 9.840885434857608px 0px rgba(56,62,196,1)">照片中的童年</div>
              </div>
            </foreignObject>
        </svg>`