svg 基本配置和使用

最新推荐文章于 2024-05-21 21:20:43 发布

神奇大叔

最新推荐文章于 2024-05-21 21:20:43 发布

阅读量2k

点赞数

分类专栏： svg 文章标签： svg

本文链接：https://blog.csdn.net/weixin_43294560/article/details/105011421

版权

svg 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

svg文件在浏览器打开就可查看

在html中使用

    第一种     
        将svg文件按照src来引入使用
    		如<img src='xx/xx.svg' />
    		
    		后台返回的svg路径,需要在返回前加上,res.type('svg'),否则使用innerHTML才能解析	
    		src如果是url,会直接请求该url地址,返回sv内容
    第二种
        在html页面使用svg标签(块级标签)
            <svg xmlns="http://www.w3.org/2000/svg" 
            	width="设置宽度"
            	height="设置高度"
            	version指定版本
            >
                ...
            </svg>
            命名空间的方式
            <html xmlns:svg="http://www.w3.org/2000/svg">
				<body>
					<svg:svg width="300" height="100" version="1.1" >
						<svg:circle cx="100" cy="50" r="40" stroke="black"	stroke-width="2" fill="red" />
					</svg:svg>
				</body>
			</html>
	第三种
		<embed src="rect.svg" width="300" height="100" 
		type="image/svg+xml"
		pluginspage="http://www.adobe.com/svg/viewer/install/" />
		
		<object data="rect.svg" width="300" height="100" 
		type="image/svg+xml"
		codebase="http://www.adobe.com/svg/viewer/install/" />
		
		<iframe src="rect.svg" width="300" height="100"></iframe>

svg在文件中使用配置
	<?xml version="1.0" encoding="utf-8"?>
	<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
	
	<svg xmlns="http://www.w3.org/2000/svg">
		...
	</svg>

代码示例:

.svg文件

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

 <!-- xmlns="http://www.w3.org/2000/svg"表示svg命名空间 -->

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
    <!-- 圆cx/cy中心点坐标 r半径 fill填充色(默认为黑色) -->
    <circle cx='100' cy='100' r='50' fill='red'></circle>  

</svg>

html文件:

<!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">
            <!-- 圆cx/cy中心点坐标 r半径 fill填充色(默认为黑色) stroke边框色 stroke-width边框宽度,可以将样式属性放在style中-->
            <circle cx='100' cy='100' r='50' fill='transparent' stroke='orange' stroke-width='10px'  stroke-opacity='0.5'></circle>  
            
            <!-- 矩形 width/height高宽 x/y左上顶点坐标 rx/ry顶点向两边蔓延的两个点之间画圆弧,即设置圆角 fill填充色(默认为黑色) stroke边框色 stroke-width边框宽度 -->
            <rect width='200px' height='200px' fill-opacity='0.5' x='100px' y='100px' fill='red' rx='30' ry='30' stroke='black'></rect>    

            <!-- 直线  stroke-opacity设置边框透明度 fill-opacity设置填充色透明度-->
            <line x1='50' y2='50' x2='100' y2='100' stroke='blue' stroke-width='5'stroke-opacity='0.5'></line>
        </svg>
        
        
    </div>

    
</body>
</html>

神奇大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
svg 基本配置和使用

svg文件在浏览器打开就可查看在html中使用第一种将svg文件按照src来引入使用如<img src='xx/xx.svg' />第二种在html页面使用svg标签(块级标签) <svg xmlns="http://www.w3.org/2000/svg"> ... &l...
复制链接

扫一扫