svg复用方式<g>, <defs>, <symbol>, <use>
微wx笑
2023-01-06【网页网站】
1
0关键字：
svg
svg复用元素的方式主要有 <g>, <defs>, <symbol>, <use>1. <g>group, 分组，定义一组元素，初始不可见<g id="group" fill="red"> <rect x="10" y="10" width="100" height="1
svg复用元素的方式主要有 <g>, <defs>, <symbol>, <use>
1. <g>
group, 分组，定义一组元素，初始不可见
<g id="group" fill="red"> <rect x="10" y="10" width="100" height="100" /> <rect x="120" y="10" width="100" height="100" /> </g>
2. <defs>
定义一些可供重用的元素，组，普通形状，渐变，mask，滤镜fliter，初始不可见
例如：
<defs> <g id="g1"> <rect id="rect1" width="100" height="50" x="10" y="10" fill="#c00"/> <circle id="circle1" cx="30" cy="30" r="10" fill="#00c"/> </g> <linearGradient id="a1"> <stop offset="5%" stop-color="#F00" /> <stop offset="95%" stop-color="#ff0" /> </linearGradient> <path id="a1" d="M0 50 C150 150 100 -50 300 50" stroke="#000" fill="none"/> <mask id="mask1"> <rect x="50" y="50" width="100" height="100" fill="#ccc"/> <rect x="150" y="150" width="50" height="50" fill="#fff"/> </mask> <filter width="200" height="200" x="0" y="0" id="blur" filterUnits="userSpaceOnUse"> <feGaussianBlur stdDeviation="5" /> </filter> </defs>
3. <use>
使用定义的元素，包括<g>, <defs>, <symbol>
<use xlink:href="#g1"/> <use xlink:href="#rect1" x="110"/> <use xlink:href="#circle1" x="210"/>
4. <symbol>
定义可重复使用的符号，初始不显示，能够创建自己的视窗，所以能够应用viewBox和preserveAspectRatio属性
<symbol id="symbol" viewBox="0 0 250 250"> <rect x="90" y="110" width="100" height="100" /> </symbol> <use id="ant" transform="translate(0 110) rotate(10 0 0)" fill="red" xlink:href="#symbol" />
转自：https://www.cnblogs.com/mengff/p/11360090.html
本文为转载文章，版权归原作者所有，不代表本站立场和观点。
