使用 SVG 对填充图像进行过渡
Transition on fill image using SVG
我试图在图像上实现平滑过渡效果,在 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>
感谢您的帮助
试试这个:)
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>
我试图在图像上实现平滑过渡效果,在 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>
感谢您的帮助
试试这个:)
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>