HTML5+CSS3-充实笔记0615

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

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

立即领取

感谢您参与论坛问题回答

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

+2 论坛币

示例二：可以绘制简单的形状
使用<line>   <rect><eclipse><polygon><polyline><text>等，这些标记绘制图形效果

复用内容
使用defs元素标记图形，然后使用use元素即可实现复用

    <svg viewbox="0 0 500 500" version="1.1">
         <defs>
             <circle id="s1" cx="100" cy="100" r="50" fill="red" stroke="blue" stoke-width="3" />
         </defs>
         <use x="0" y="0" xlink:href="#s1" />
         <use x="50" y="50" xlink:href="#s1" />
     </svg>

图形阴影：需要借助SVG的滤镜功能
<filter>元素设置id属性，用于确定滤镜的唯一名称。<rect>元素的filter属性将元素链接到f1滤镜
<feGaussianBlur>元素的stdDeviation属性用于设置模糊量
<feOffset>设置阴影的位移
<feColorMatrix>过滤器用来转换偏移的使之更接近黑色

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
         <defs>
             <filter id="f1" x="0" y="0" width="200%" height="200%">
                 <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
                 <feColorMatrix result="matrixOut" in="offOut" type="matrix"
                 value="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
                 <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
                 <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
             </filter>
         </defs>
         <rect width="90" height="90" stroke="blue" stroke-width="5" fill="red" filter="url(#f1)" />
     </svg>

扫码加我 拉你入群

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

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

分享0 收藏0 回帖

为学习笔记点赞！