如何在 svg stroke-dasharray 中使用 calc()

Question

我正在做这个效果（见网址），但在我的项目中，宽度和高度不固定。 https://tympanus.net/codrops/2014/02/26/creating-a-border-animation-effect-with-svg-and-css/

我不知道如何自动计算stroke-dasharray。

谢谢！！

.box-wrap{height: 200px;margin-top: 100px;text-align: center;}
.box{background: #ffffff; width: 30%; margin-right: 10px;height: 200px;position: relative;}
.box svg { position: absolute; top: 0; left: 0; }
.box svg line { stroke-width: 3; stroke: #000000; fill: none; transition: all .8s ease-in-out; }
.box-wrap .even-news-content:hover svg line{transition-delay: 0.1s;}
.box svg line.top, .box svg line.bottom { stroke-dasharray: calc(100% + 30px) calc(100% - 60px);}
.box svg line.left,.box svg line.right {stroke-dasharray: calc(100% + 30px) calc(100% - 60px); }
.box:hover svg line.top { transform: translateX(-200%); }
.box:hover svg line.bottom {transform: translateX(200%);}
.box:hover svg line.left {transform: translateY(200%);}
.box:hover svg line.right {transform: translateY(-200%); }

<link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class=" d-flex justify-content-around box-wrap">
    <div class="box">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
            <line class="top" x1="0" y1="0" x2="300%" y2="0"/>
            <line class="left" x1="0" y1="100%" x2="0" y2="-200%"/>
            <line class="bottom" x1="100%" y1="100%" x2="-200%" y2="100%"/>
            <line class="right" x1="100%" y1="0" x2="100%" y2="300%"/>
        </svg>
    </div>
    <div class="box">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
            <line class="top" x1="0" y1="0" x2="300%" y2="0"/>
            <line class="left" x1="0" y1="100%" x2="0" y2="-200%"/>
            <line class="bottom" x1="100%" y1="100%" x2="-200%" y2="100%"/>
            <line class="right" x1="100%" y1="0" x2="100%" y2="300%"/>
        </svg>
    </div>
    <div class="box">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
            <line class="top" x1="0" y1="0" x2="300%" y2="0"/>
            <line class="left" x1="0" y1="100%" x2="0" y2="-200%"/>
            <line class="bottom" x1="100%" y1="100%" x2="-200%" y2="100%"/>
            <line class="right" x1="100%" y1="0" x2="100%" y2="300%"/>
        </svg>
    </div>
</div>

Answer 1

这是我的解决方案，但我没有使用calc。我不需要。我正在使用路径而不是线条，并且我正在使用过渡将stroke-dashoffset 从 0 动画到线条的两倍。 stroke-dasharray 设置为与路径一样长。

更新

在第二个 SVG 中，我按照您的意图使用线条

.box{width:30%; border:1px solid red; position:relative; display:inline-block;}
.box p{position:absolute;width:100%;height:1em;text-align:center;margin:auto;top:0;bottom:0;}
.box:hover .top, .box:hover .bottom{stroke-dashoffset:200}
.box:hover .left, .box:hover .right{stroke-dashoffset:200}
path,line{stroke:black; fill:none;stroke-linecap: round;}



.top,.bottom{stroke-dasharray:100;stroke-dashoffset:0;}
.left,.right{stroke-dasharray:50;stroke-dashoffset:0}

path,line{transition: stroke-dashoffset 1.5s;}

<div class="box"><p>PATHS</p>
        <svg viewBox="-5 -5 110 60">
            <path class="top" d="M100,0H0" />
            <path class="left" d="M0,0V50"/>
            <path class="bottom"  d="M0,50H100"/>
            <path class="right" d="M100,50V0"/>
        </svg>
</div>

<div class="box"><p>LINES</p>
        <svg viewBox="-5 -5 110 60">
            <line class="top" x1="100"  />
            <line class="left" y2="50"/>
            <line class="bottom"  y1="50" x2="100" y2="50"/>
            <line class="right" x1="100" y1="50" x2="100"/>
        </svg>
</div>