svg foreignObject 作用总结

svg foreignObject主要能实现 文本换行 和 dom转图片 两个功能

1. svg文本换行

svg文字功能很弱，不支持自动换行，需要用tspan进行截断

<svg xmlns="http://www.w3.org/2000/svg">
  <text font-size="16">
    <tspan x="0" y="10">这个是一段要换</tspan>
    <tspan x="0" y="26">行的文字</tspan>
  </text>
</svg>

foreignObject支持直接嵌套dom，可利用dom实现换行

<svg xmlns="http://www.w3.org/2000/svg">
  <foreignObject wwidth="100%" height="100%">
      <body xmlns="http://www.w3.org/1999/xhtml">
        <div style="font-size:20px;">这个是一段要换行的文字</div>
      </body>
    </foreignObject>
</svg>

2. dom转图片

dom转图片，即所谓的网页截图，不光是截图这么简单，dom绘制的一些效果可以直接转换为svg图片，使用svg图片做一些效果，例如 背景图，mask遮罩图等，比直接用svg实现方便很多。并且 foreignObject 支持包含style标签，支持 各种样式 和 animation，可实现动画效果，可通过 background-clip: text 配合svg背景图实现文字动画特效，例如 文字镂空波浪动画

foreignObject包含的dom，可直接使用 svg文件或内联 的方式来使用图片，方便快捷，还可修改

当然也可以将svg的图片通过canvas.toDataURL转换为png或jpg图片，实现截图功能，具体可参考 使用svg进行网页截图

例如下面可实现一个自适应的边框模糊矩形

<svg xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="100%" height="100%">
    <body class="wrap" xmlns="http://www.w3.org/1999/xhtml">
      <style>
        .wrap{
          box-sizing: border-box;
          margin: 0;
          height: 100%;
          padding: 10px;
        }
        .shadow{
          height: 100%;
          background:black;
          border-radius:10px;
          box-shadow:0 0 5px black, 0 0 10px black, 0 0 15px black
        }
      </style>
      <div class="shadow"></div>
    </body>
  </foreignObject>
</svg>

 

 


参考：CSS 如何实现羽化效果

posted @ 2023-08-13 16:11  全玉  阅读(339)  评论(0)  编辑  收藏  举报