svg 组合标签g以及位移变换操作、文本标签text、image标签
g组合标签
<g id='xx' stroke='xx' stroke-width='xx'>
组合标签,对其中的图案进行整体操作,设置的属性必须是所有的图形都有的,不是指g标签内所有图形共有的
</g>
共有属性:
样式
stroke、fill等样式
位移
translate='transform(xx,xx)' css样式的设置
transform='rotate(-90,350,350)'； 逆时针旋转,后面两个参数为旋转坐标
设置id属性
dom选中css操作
设置style属性
写共有样式
text文字标签
<text>文字</text>
属性:
x/y:基点,文字以x坐标开始,y坐标为基线之上，可以是百分比
font-size:设置字体
text-anchor:'middle'使一行文字的中心位置在基准点上
'start'从基准点开始(默认)
'end'结束位置在基准点
image图片标签
<image x='' y='' width='' height='' xlink:href=''></image>
属性:
x/y:左上角坐标
width/height:大小设置
xlink:href='' :图片地址
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width:600px;
height:600px;
margin:0 auto;
}
</style>
</head>
<body>
<div style="border:solid 1px orange;" class='box'>
<svg width='100%' height='100%'
xmlns="http://www.w3.org/2000/svg">
<g transform='translate(200,200)' fill='transparent' stroke='orange' stroke-width='5px'>
<circle r='50' ></circle>
<circle r='40' ></circle>
<circle r='30' ></circle>
</g>
<g style='cursor:pointer'>
<rect x='100' y='100' width='200' height='200' fill='transparent' stroke='black'>
</rect>
<image x='200' y='200' width='100' height='100' xlink:href='https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=372057738,1023632999&fm=111&gp=0.jpg'></image>
<text x='200' y='200' font-size='20' text-anchor='middle' >哈哈</text>
</g>
</svg>
</div>
</body>
</html>