随笔分类 -  SVG

使用脚本控制SVG
摘要：1、脚本控制 <svg width="350px" height="200px" viewBox="0 0 350 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>A 阅读全文
posted @ 2022-02-06 20:54 xl4ng 阅读(102) 评论(0) 推荐(0) 编辑
在SVG中插入文本
摘要：1、插入文本并设置对其方式 <svg id="svg" xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" viewBox="0 0 500 500"> <g style="font-size:14pt;"> <path d 阅读全文
posted @ 2022-02-04 20:52 xl4ng 阅读(2332) 评论(0) 推荐(0) 编辑
SVG填充图案
摘要：<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 200 200"> <defs> <pattern id="tile" x="0" y="0" width="20" height="2 阅读全文
posted @ 2022-02-03 21:17 xl4ng 阅读(165) 评论(0) 推荐(0) 编辑
SVG中的路径
摘要：1、使用moveto与lineto <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> width="150px" height="150px" viewBox="0 0 150 15 阅读全文
posted @ 2022-02-02 21:29 xl4ng 阅读(318) 评论(0) 推荐(0) 编辑
SVG坐标系统变换
摘要：1、translate变换 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> width="200px" height="200px" viewBox="0 0 200 200"> 阅读全文
posted @ 2022-02-02 10:46 xl4ng 阅读(146) 评论(0) 推荐(0) 编辑
SVG中的分组与引用对象
摘要：<g>元素 <svg xmlns="http://www.w3.org/2000/svg" width="240px" height="240px" viewBox="0 0 240 240"> <title>Grouped Drawing</title> <desc>Stick-figure dr 阅读全文
posted @ 2022-02-01 22:01 xl4ng 阅读(135) 评论(0) 推荐(0) 编辑
在SVG中使用样式
摘要：<!-- 引入外部样式表 --> <?xml-stylesheet type="text/css" href="ext_style.css" ?> <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox 阅读全文
posted @ 2022-02-01 21:31 xl4ng 阅读(190) 评论(0) 推荐(0) 编辑
SVG绘制折线
摘要：<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="130px" viewBox="0 0 100 130"> <!-- 未设置fill:none时，折现会被填充 --> <polyline points="5 20,20 20 阅读全文
posted @ 2022-02-01 12:31 xl4ng 阅读(419) 评论(0) 推荐(0) 编辑
SVG绘制多边形
摘要：<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100"> <!-- 平行四边形 --> <polygon points="15,10 55,10 45,20 5,20" st 阅读全文
posted @ 2022-02-01 12:05 xl4ng 阅读(207) 评论(0) 推荐(0) 编辑
SVG绘制圆和椭圆
摘要：<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 200 200"> <!-- 绘制圆 --> <circle cx="30" cy="30" r="20" style="stroke: 阅读全文
posted @ 2022-02-01 11:33 xl4ng 阅读(107) 评论(0) 推荐(0) 编辑
SVG绘制矩形
摘要：<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 200 200"> <!-- 内部填充为黑色，不绘制边框 --> <rect x="10" y="10" width="30" heig 阅读全文
posted @ 2022-02-01 11:23 xl4ng 阅读(278) 评论(0) 推荐(0) 编辑
SVG绘制线段
摘要：<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 200 200"> <!--画笔颜色--> <line x1="10" y1="10" x2="50" y2="10" style="s 阅读全文
posted @ 2022-02-01 10:55 xl4ng 阅读(284) 评论(0) 推荐(0) 编辑
在网页中显示SVG
摘要：1、将SVG作为图片显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .background-cat { background-image: url("cat. 阅读全文
posted @ 2022-01-23 17:11 xl4ng 阅读(1051) 评论(0) 推荐(0) 编辑
用SVG代码画一只小猫咪
摘要：<svg width="140" height="170" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <title>Cat</title> <desc>Stick Figure of 阅读全文
posted @ 2022-01-23 12:26 xl4ng 阅读(138) 评论(0) 推荐(0) 编辑