Pattern

图案填充：用于SVG图形对象的填充 fill或描边stroke，在x轴、y轴以固定的间距平铺

  • 用法

pattern 中定义好图案，通过id引用对某个图形进行填充
pattern 宽高属性默认根据填充图形的百分比来确认

patternUnits

  • objextBoundingBox
    x、y、width和height的值都是占外框的百分比

  • userSpaceOnUse:
    x、y、width和height表示的值都是当前用户坐标的值，是绝对值

foreignObject

foreignObject 标签内可以嵌入 XHTML 元素

文字

作用：

  1. 文字自动换行
  2. 将页面DOM元素变成图片

原理：

1
2
3
4
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.drawImage(img, 0, 0);
img.src = canvas.toDataURL('image/png');