零基础html学习-完结

简介: 零基础html学习

一、SVG绘制文本


<text></text>

属性:


x:文本位置的横坐标


y:文本位置的纵坐标


font-size:文本的大小


text-anchor:文本对齐方式(start、middle、end)


transform:变换


transform="rotate(旋转角度 旋转中心点坐标)"
默认坐标(0,0)


在一个元素中,文本和字体属性以及当前的文本位置可以通过包含一个元素用绝对坐标值或相对坐标值进行调整。


给文本添加链接

<svg xmlns="http://www.w3.org/2000/svg">
       <a xlink:href='' target=" ">
           <text>
           </text>
       </a>
    </svg>

二、绘制路径


:应用路径可以绘制任意形状的图形。


d:绘制路径的命令


M(move to):定义绘制图形的起点坐标。


d="M150 0"

l(line to):用来绘制一条直线。


d="M150 0 l75 200"
//起点(150,0) 结束(75,200)

命令大写表示绝对定位(相对于屏幕坐标原点的位置)


小写表示相对定位(相对于上一个绘制的点)


把多个绘图元素包裹起来。


三、svg描写


<path stroke stroke-width stroke-linecap stroke-dasharray>

stroke:笔画属性


stroke-width:笔画宽度属性


stroke-linecap:笔画笔帽属性。


值:square方形笔帽   round圆形笔帽 butt没有线帽


stroke-dasharray:虚线笔画属性。


目录
相关文章
|
19天前
|
存储 数据安全/隐私保护
走进HTML学习二
走进HTML学习二
|
6月前
|
前端开发
【前端学习从青铜到王者】—HTML常用标签(二)
【前端学习从青铜到王者】—HTML常用标签(二)
|
6月前
|
前端开发
【前端学习从青铜到王者】—HTML介绍(一)
【前端学习从青铜到王者】—HTML介绍(一)
|
19天前
|
存储 移动开发 前端开发
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
52 0
|
17天前
|
前端开发
从零开始学习前端开发:HTML基础
HTML是前端开发的基础,它是网页内容的结构化描述语言。本文将介绍HTML的基本语法、标签和元素,以及如何使用它们来创建简单的网页。
|
9天前
|
移动开发 前端开发 JavaScript
学习html
【5月更文挑战第25天】学习html
18 2
|
19天前
学习HTML表单最关键要掌握的三个要点
学习HTML表单最关键要掌握的三个要点。
11 1
|
19天前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始
|
19天前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
75 1
|
19天前
|
XML JavaScript 前端开发
走进HTML学习一
走进HTML学习一