svg实现直线带双向箭头，且直线中间镶嵌文本

最新推荐文章于 2022-10-19 22:51:10 发布

lianflower

最新推荐文章于 2022-10-19 22:51:10 发布

阅读量526

点赞数

本文链接：https://blog.csdn.net/lianflower/article/details/107492729

版权

Css 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>svg实现直线带双向箭头，且直线中间镶嵌文本</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box; /*保证盒子的大小不会因为padding值的影响而变大。默认情况下padding的值会影响盒子的大小*/
        }
        html, body {
            width: 100%;
            height: 100%;
        }
        #test1 {
            width: 30%;
            height: 15%;
            margin-left: 20%;
            margin-top: 10%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: red solid 1px;
        }
        .test2 {
            height: 15%;
        }
        .svg14 {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
        .polygon14 {
            fill: black;
            stroke-width: 1;
            stroke: red;
        }
    </style>
</head>
<body>
<div id="test1">
    <div class="test2">
        <svg class="svg14" viewBox="0 0 305 15" preserveaspectratio='none'>
            <polygon class="polygon14"  points='5,7 10,1 1,7 10,14 5,7 304,7 '  />
        </svg>
    </div>
    <div id="test3">2020</div>
    <div class="test2">
        <svg class="svg14" viewBox="0 0 305 15" preserveaspectratio='none'>
            <polygon class="polygon14"  points='1,7 300,7 295,1 304,7 295,14 300,7 '  />
        </svg>
    </div>
</div>
</body>

<script>
    var test1Width = parseFloat($("#test1").css("width"));
    var test3Width = parseFloat($("#test3").css("width"));
    var test2Width = (test1Width - test3Width) / 2;
    $(".test2").css("width", test2Width - 3);
</script>
</html>

lianflower

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
svg实现直线带双向箭头，且直线中间镶嵌文本

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>svg实现直线带双向箭头，且直线中间镶嵌文本</title> <script src="../js/jquery-3.3.1.min.js"></script> <style> * { mar
复制链接

扫一扫