SVG 在 div 上响应

Question

正如标题所说，我想给一个div添加一个SVG边框动画。我尝试使用静态 div 但现在我想让它工作，即使 div 宽度和高度动态变化（如缩略图 class 和 Bootstrap）

这是我的 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

例如，您在 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;
}

Answer 2

如果您希望 SVG 响应式填充 <div>，您需要给它一个 viewBox 并设置 preserveAspectRatio="none" 以便它伸展以填充 <div>水平和垂直。否则它只会保持它的纵横比，只是放大或缩小以适应 <div>.

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

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

<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>

SVG 在 div 上响应

SVG responsive on div

html

svg

twitter-bootstrap

responsive