SVG剪切路径clipPath用法示例

SVG剪切路径用于根据特定路径剪切SVG形状。也称为SVG裁剪。
【SVG剪切路径clipPath用法示例】路径内部的形状部分是可见的, 而外部的部分则是不可见的。
例子

< !DOCTYPE html> < html> < body> < svg height="450" width="450"> < defs> < clipPath id="clip"> < rect x="15" y="15" width="40" height="40" /> < /clipPath> < /defs> < circle cx="25" cy="25" r="30"style="fill: #0000ff; clip-path: url(#clip); " /> < /svg> < /body> < /html>

立即测试
解释
  • 现在, 你可以看到剪切路径内的圆形部分可见的其余部分都被剪切了。
  • < clipPath> 元素的id属性定义剪辑路径的唯一名称。

    推荐阅读