Question

正如标题所说，我想在div中添加一个SVG边框动画。我尝试使用静态div，但现在我想使其工作，即使div宽度和高度动态变化（作为带引导程序的缩略图类）

这是我的SVG：

<svg>
    <line class="top" x1="0" y1="0" x2="3000" y2="0"/>
    <line class="left" x1="0" y1="3000" x2="0" y2="0"/>
    <line class="bottom" x1="3000" y1="300" x2="0" y2="300"/>
    <line class="right" x1="300" y1="0" x2="300" y2="300"/>
</svg>

感谢您的帮助，这里有一个jsbin：http://jsbin.com/suvinakaqa/1/edit

Answer 1

如果您希望SVG响应地填充<div>，您需要为其设置viewBox并设置preserveAspectRatio="none"，以便它伸展以水平填充<div>和垂直的。否则它只会保持其宽高比，只是向上或向下缩放以适应<div>。

请注意，即使您已禁用纵横比，发生的拉伸也会导致水平线的宽度与垂直线的宽度不同。要解决此问题，您可以在行中添加vector-effect="non-scaling-stroke"。

＆＃13;

.myDiv
{
  width: 100%;
  height: 300px;
}

＆＃13;

<div class="myDiv">
  <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none"
       stroke="black" stroke-width="4">
    <line class="top" x1="0" y1="0" x2="100" y2="0" vector-effect="non-scaling-stroke"/>
    <line class="left" x1="0" y1="100" x2="0" y2="0" vector-effect="non-scaling-stroke"/>
    <line class="bottom" x1="100" y1="100" x2="0" y2="100" vector-effect="non-scaling-stroke"/>
    <line class="right" x1="100" y1="0" x2="100" y2="100" vector-effect="non-scaling-stroke"/>
  </svg>
</div>

＆＃13;

Answer 2

例如，您在HTML中有以下内容

<div class="myClass">
    <svg>
       <line class="top" x1="0" y1="0" x2="3000" y2="0"/>
       <line class="left" x1="0" y1="3000" x2="0" y2="0"/>
       <line class="bottom" x1="3000" y1="300" x2="0" y2="300"/>
       <line class="right" x1="300" y1="0" x2="300" y2="300"/>
   </svg>
</div>

请使用以下CSS

.myClass svg{
  width:100% !important;
  height:auto;
}

SVG响应div

2 个答案: