SVG边框动画

Question

我发现了这个很酷的SVG边界动画，我试图将其应用到我的网站，但是我的网站包含不同大小的图像，因此动画受到宽度和高度的限制。

是否有任何方法来编辑代码，以便我可以使用这个动画的所有图像大小?

对不起，我的英语不好:)

<svg width="200" height="200">
      <line class="top" x1="0" y1="0" x2="600" y2="0"/>
      <line class="left" x1="0" y1="200" x2="0" y2="-400"/>
      <line class="bottom" x1="200" y1="200" x2="-400" y2="200"/>
      <line class="right" x1="200" y1="0" x2="200" y2="600"/>
  </svg>

Answer 1

你可以使用简单的CSS和渐变，而不用考虑容器的大小或img: DEMO

div, img {
  margin:1em;
  display:inline-block;
  padding:0.5em;
  vertical-align:top;
  border-radius:10px;
  background:linear-gradient(to left,black 33.33%,transparent 40% ,transparent 50%,black 66.66%) 0 0 repeat-x, linear-gradient(to right,black 33.33%,transparent 40% ,transparent 50%, black 66.66%) 100% 100%  repeat-x, linear-gradient(to top,black 33.33%,transparent 40% ,transparent 50%, black 66.66%) 0 100% repeat-y, linear-gradient(to bottom,black 33.33%,transparent 40% ,transparent 50%, black 66.66%) 100% 0 repeat-y, linear-gradient(to bottom right,turquoise,white,lime) center no-repeat ;
  background-color:gray;
  background-size:300% 5px,300% 5px,5px 300%,5px 300%,100% 100%;
  transition:1.5s linear; 
  }
div:hover { background-position:100% 0 ,0% 100%, 0 0 , 100% 100%, 0 0 ;}

可能的标记

<div>
  <h1> border transition</h1>
  <p>text</p>
</div>
<img src="http://lorempixel.com/200/150/"/>

Answer 2

如何:

<svg class="img">

css:

svg.img {
    hight: auto;
}