使用 SVG 对填充图像进行过渡答案

【问题标题】：Transition on fill image using SVG使用 SVG 对填充图像进行过渡
【发布时间】：2016-11-02 11:35:32
【问题描述】：

我试图在图像上实现平滑过渡效果，在 vivus.js 进行中风之后，它应该在图像出现时进行平滑过渡，但不幸的是没有。使用颜色效果很好，但不知道为什么它不能使用图像？实例：

new Vivus('hexagon', {type: 'delayed', duration: 160}, function(){
  $('#hex').attr('style', 'fill: url(#img); webkit-transition: fill 1.2s; -moz-transition: fill 1.2s; transition: fill 1.2s;')
});

#hexagon {
	width: 110px;
	height: 110px;
	position: absolute;
	left: 50%;
	top: 8%;
	margin-left: -55px;
}

#hex, #img  {
  stroke: #DC3522;
  stroke-width: 2;
  fill: transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.3.1/vivus.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
</head>
<body>
  <svg id = "hexagon" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
      <image xlink:href="http://graphicloads.com/wp-content/uploads/2014/11/iron-man-illustration.png" x="-25" width="150" height="100" />
    </pattern>
  </defs>
  <polygon id="hex" points="50 1 95 25 95 75 50 99 5 75 5 25" />
</svg>

</body>

感谢您的帮助

【问题讨论】：

标签： jquery html css vivus

【解决方案1】：

试试这个:)

new Vivus('hexagon', {type: 'delayed', duration: 160}, function(){
  $('#ironman').attr('style', '-webkit-animation:fillthis 0.3s forwards')
});

#hexagon {
	width: 110px;
	height: 110px;
	position: absolute;
	left: 50%;
	top: 8%;
	margin-left: -55px;
}
@-webkit-keyframes fillthis
{
  from{
    opacity:0  
  }
  to
  {
    opacity:1
  }
}
    #hex, #img  {
      stroke: #DC3522;
      stroke-width: 2;
      fill:url(#img)
    }
    image{
      opacity:0
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.3.1/vivus.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
</head>
<body>
  <svg id = "hexagon" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
      <image id="ironman" xlink:href="http://graphicloads.com/wp-content/uploads/2014/11/iron-man-illustration.png" x="-25" width="150" height="100" />
    </pattern>
  </defs>
  <polygon id="hex" points="50 1 95 25 95 75 50 99 5 75 5 25" />
</svg>

</body>

【讨论】：

谢谢，不知道我可以在图像的图案部分使用 id，这很棘手。为你点赞