HTML5+CSS3=充实笔记0616

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

图形渐变

<linearGradient>标签设置，x1/y1 x2/y2设置渐变的开始和结束坐标。
<stop>设置渐变的颜色，可以有多个
offset属性用于设置渐变的位置，以百分比表示

<defs>

            <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                 <stop offset="0%" style="stop-color: red; stop-opacity:1" />
                 <stop offset="100%" style="stop-color: blue; stop-opacity:1" />
             </linearGradient>
         </defs>
         <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />

使用<radialGradient>可以定义放射渐变

<defs>

            <radialGradient id="grad2" cx="20%" cy="30%" r="30%" fx="50%" fy="50%" >
                 <stop offset="0%" style="stop-color: red; stop-opacity:0" />
                 <stop offset="100%" style="stop-color: blue; stop-opacity:1" />
             </radialGradient>
         </defs>
         <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />

cx,cy和r设置最外层的圆心和半径；fx和fy设置最内层的圆

绘制自由路径

使用<svg>的<path>元素，可以绘制更加复杂的图形
<path id="svg_1" d="m127, 3851-1, -3412, -3115, -2717 ....>
d属性，可以包含多个连续的指令，用于绘制复杂图形
指令有m/L/H/V/A/C/S/Q/T/Z等

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0 收藏0 回帖

关键词：HTML5 HTML htm Offset Off

学习笔记奖！

谢谢分享

thanks for sharing