svg 圈线圈案例

最新推荐文章于 2022-10-07 11:18:49 发布

神奇大叔

最新推荐文章于 2022-10-07 11:18:49 发布

阅读量197

点赞数

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

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

版权

svg 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

在这里插入图片描述代码示例:

<!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:780px;
            height:400px;
            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 style="cursor:pointer">
                <line x1="100" y1="100" x2='390' y2='200' stroke='#ccc'></line>
                <!-- 因为线段不能用fill来填充颜色,所以要设置一个相同的外边框透明且比原线宽度大的线去覆盖原来的,好点击 -->
                <line x1="100" y1="100" x2='390' y2='200' stroke='transparent' stroke-width='5'></line>
                <rect x='235' y='140' fill='#2995FF' height='20' width='20' rx='5'></rect>
                <text x='245' y='155' text-anchor='middle' fill='white'>?</text>
            </g>
            <!-- 绘制上圆 -->
            <g style="cursor:pointer">
                <circle cx='100' cy='100' r='40' fill='white' stroke='#FF0000'></circle>  
                <text x='100' y='105' text-anchor='middle' font-size='10'>文字一</text>
            </g>
            <!-- 绘制下圆 -->
            <g style="cursor:pointer">
                <circle cx='390' cy='200' r='60' fill='white' stroke='#FF0000'></circle>
                <text x='390' y='205' text-anchor='middle' font-size='10'>文字二</text>
            </g>
        </svg>
        
        
    </div>

    
</body>
</html>

神奇大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
svg 圈线圈案例

代码示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum...
复制链接

扫一扫

专栏目录