svg教程

时间：2023-01-30 14:30:00 075k1l100只电阻器

svg教程

参考：https://segmentfault.com/a/1190000012071386

svg 标签

<svg width="100" height="100" viewBox="50 50 50 50">   <circle id="mycircle" cx="50" cy="50" r="50" /> svg>

viewBox属性指定视口从(50, 50)从这一点开始，视口的宽度和高度分别为50。

*****注意，视觉必须适应空间。在上述代码中，视口的大小是 50 x 50，由于 SVG 图像的大小是 100 x 100，所以视野会被放大来适应 SVG 图像的大小是放大的四倍。也就是说，viewbox对原本的svg位置和宽度做了相同比例的缩放。

*****如果不指定width属性和height属性，只指定viewBox属性相当于只给定 SVG 图像的长宽比。SVG 图像的默认大小将等于所在 HTML 元素的大小。

可以设置以下五个元素 viewbox:
, ,

除了元素之外，其他元素使用preserveAspectRatio必须在同一元素上 viewBox 提供的值。如果不提供属性 viewBox ，则忽略了preserveAspectRatio。

内置图形

rect(矩形) <rect x="0" y="0" width="100" height="100" fill="pink">rect>    circle(圆)   <circle cx="50" cy="50" r="50" fill="pink">circle>

ellipse(椭圆)   <ellipse cx="50" cy="50" rx="100" ry="50" fill="pink">ellipse>

line(直线)   <line x1="0" y1="0" x2="10" y2="10" style="stroke:red;stroke-width:2">rect>

polyline(折线)  <polyline points="50,0 60,10 60,20" fill="none" stroke-width="1" stroke="red">polyline>
			

polygon(多边形)  <polygon points="50,0 60,10 60,20" fill="pink">polygon> 
			
path(路径)

text(文本) <text x="200" y="150" dx="-5" dy="5" rotate="180" textLength="90">
   			 I LOVE <tspan fill="red">D3tspan>text>

image(图形) <image href="*******" x="0" y="0" height="200" width="300"/>
		  	

use(复制元素)  <circle cx="50" cy="50" r="5" fill="pink" id="circle">circle>
			<use href="#circle" x="60">use>

内置图形的html属性或(css样式)

fill(填充颜色)   
fill-opacity(填充透明度)
stroke(边框颜色)   
stroke-width(边框宽度)   
stroke-opacity(边框透明度)   
stroke-dasharray(创建虚线)
transform(变换)
filter(滤镜)(url[#滤镜id)]

path

命令            名称                        参数
 M           moveto  移动到                (x y)+
 Z          closepath  关闭路径            (none)
 L           lineto  画线到                (x y)+
 H          horizontal lineto  水平线到      x+
 V          vertical lineto  垂直线到        y+
 A        elliptical arc椭圆弧             (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
 C        curveto 三次贝塞尔曲线到          (x1 y1 x2 y2 x y)+
 S     smooth curveto光滑三次贝塞尔曲线到   (x2 y2 x y)+
 Q        Bézier curveto二次贝塞尔曲线到    (x1 y1 x y)+
 T     smooth Bézier curveto光滑二次贝塞尔曲线到  (x y)+

如果指令字母是大写的，例如M, 则表示坐标位置是绝对位置；如果指令字母小写的，例如m, 则表示坐标位置是相对位置。

 <svg width="200" height="200">
    <path d="M100 100 H200 L100 0 Z" fill="red" stroke="blue" stroke-width="2"/>
 svg>

容器元素

g（分组容器）

中的元素会直接作为一个整体呈现，可以不需要引用就能呈现，当然也能被use复制。

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
    
    <g id="myG" stroke="green" transform="rotate(20 20,40)" stroke-width="5">
        <circle cx="40" cy="40" r="25" />
        <circle cx="60" cy="60" r="25" />
    g>
    
    <use href="#myG" x="100" fill="blue" />
svg>

a(链接元素)

点击图形，跳转到指定链接

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  
  <a href="/docs/Web/SVG/Element/circle">
    <circle cx="50" cy="40" r="35"/>
  a>
svg>

*****注意：在获取svg的a元素时，为了区分html的a元素，要加命名空间

//css
@namespace svg url(http://www.w3.org/2000/svg);

svg|a { 
        }

defs

用来存储在后续将会用到的图像，必须在后续通过其他元素引用才能呈现。

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        
        <linearGradient id="myGradient" gradientTransform="rotate(90)">
            <stop offset="20%" stop-color="gold" />
            <stop offset="90%" stop-color="pink" />
        linearGradient>
    defs>
    
<circle id="myCircle" cx="0" cy="0" r="5" fill="url('#myGradient')" />
svg>

symbol

定义一个模板元素，本身是不会呈现的，只有使用use引用后，才会呈现出来

<svg viewBox="0 0 100 100" width="300" height="300" xmlns="http://www.w3.org/2000/svg">
     
    
    <symbol id="sym01" viewBox="0 0 150 110">
        <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red" />
        <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white" />
    symbol>

    
    <use xlink:href="#sym01" x="0" y="0" width="100" height="50" />

svg>

marker

marker元素定义了用于在给定的、、或元素上绘制箭头或多点标记的图形。
在元素上使用 marker-start, marker-mid, 和 marker-end 属性，来引用marker元素。

marker有如下属性:

markerHeight: 定义marker元素的高度
markerWidth: 定义marker元素的宽度
markerUnits: 该属性为markerWidth、markerHeight以及marker的内容定义了坐标系统。 userSpaceOnUse|strokeWidth
orient：定义marker相对于寄宿元素的方向，值有auto|auto start-reverse|。
refX: marker元素相对于X轴的偏移。和正常坐标系相反，正值向左，负值向右。
refY：marker元素相对于Y轴的偏移。和正常坐标系相反，正值向上，负值向下。
viewBox：当前marker片段定义SVG视图端口的边界。
preserveAspectRatio：定义了如果marker片段嵌入到具有不同纵横比的容器中，则必须如何对其进行变形。

注意：
如果一个元素定义了marker-start，那么就在开头的位置添加marker，
如果一个元素定义了marker-mid，那么就在所有中间位置添加marker，
如果一个元素定义了marker-end，那么就在结尾位置添加marker。

可以定义多个，那么也就添加多个。

<svg width="1000" height="1000"viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        
        <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="16" markerHeight="6" markerUnits="strokeWidth" preserveAspectRatio="none" orient="auto-start-reverse">
            <path d="M 0 0 L 10 5 L 0 10 z" />
        marker>

        
        <marker id="dot" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5">
            <circle cx="5" cy="5" r="5" fill="blue" />
        marker>
    defs>

    
    <polyline points="10,10 10,120 120,120" fill="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)" />

    
    <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" />
svg>

渐变

分为线形渐变和径向渐变，渐变本身不会渲染，必须通过具体元素的fill引用才生效

锐单商城拥有海量元器件数据手册、IC替代型号，打造电子元器件IC百科大全！

svg教程

相关文章