SVG 图标只变形一次,不会变形回来
SVG icon only morphs once, won't morph back
我正在使用 SVG Morpheus 根据用户点击来回变换两个图标。我有两个问题。
1) The first icon initially doesn't show up. I realize this is because
I put a display:none
on there but that's how it was shown in the
demo. Am I supposed to take off the display:none
styling for the initial icon?
2) When I first click on the 'Get in Touch' text, the icon morphs
fine. However, when I click the text (now 'Projects') again, the icon
doesn't morph back.
我已经为工作图标创建了两个函数来变身为邮件图标,反之亦然。另外,如果有更有效的方法将这两个功能合并为一个功能,我会洗耳恭听。
我哪里做错了?
Fiddle: http://jsfiddle.net/o8u9225q/5/
HTML
<div id="icons">
<svg id="iconset" height="24" width="24" viewbox="0 0 24 24">
<g id="work" style="display:none">
<rect width="6.5" height="6.5"/>
<rect x="8.7" width="6.5" height="6.5"/>
<rect x="17.5" width="6.5" height="6.5"/>
<rect y="8.7" width="6.5" height="6.5"/>
<rect x="8.7" y="8.7" width="6.5" height="6.5"/>
<rect x="17.5" y="8.7" width="6.5" height="6.5"/>
<rect y="17.5" width="6.5" height="6.5"/>
<rect x="8.7" y="17.5" width="6.5" height="6.5"/>
<rect x="17.5" y="17.5" width="6.5" height="6.5"/>
</g>
<g id="mail" style="display:none">
<polygon points="1.1,3.2 6.6,3.2 12.5,3.2 12,12.5"/>
<polygon points="8.7,3.2 15.3,3.2 15.3,9.6 12,12.5"/>
<polygon points="20.5,3.2 23,3.2 12,12.5 13.1,3.2"/>
<polygon points="0,4.2 6.5,14.5 6.5,20.9 0,20.9"/>
<rect x="8.7" y="14.5" width="6.5" height="6.4"/>
<rect x="17.5" y="14.5" width="6.5" height="6.4"/>
<polygon points="0,4.2 12,14.5 6.5,20.9 0,20.9"/>
<rect x="6.3" y="14.5" width="11.4" height="6.4"/>
<polygon points="12,14.5 24,4.2 24,20.9 17.5,20.9"/>
</g>
</svg>
</div>
<a id="contact-button" href="#">Get in touch</a>
JS
var c = 0;
function morphWork() {
var myIcons = new SVGMorpheus('#iconset');
myIcons.to('mail');
};
function morphMail() {
var myIcons = new SVGMorpheus('#iconset');
myIcons.to('work');
};
$('#contact-button').click(function (e) {
e.preventDefault();
if (c++ % 2 == 0) {
$(this).addClass('project-button').text('Projects');
morphMail();
} else {
$(this).removeClass('project-button').text('Get in touch');
morphWork();
}
});
想通了。猜猜我只能使用 var myIcons = new SVGMorpheus('#iconset');
一次。这是最终结果:http://jsfiddle.net/o8u9225q/6/
制作你的第一个图标display:block;
。而不是一键调用这两个函数,使它们成为不同的 click
函数。
要获取邮件图标,您必须更改邮件功能。
function morphWork() {
var myIcons = new SVGMorpheus('#iconset');
myIcons.to('mail');
};
function morphMail() {
var myIcons = new SVGMorpheus('#iconset');
myIcons.to('work');
};
至此
function morphWork() {
var myIcons = new SVGMorpheus('#iconset');
myIcons.to('work');
};
function morphMail() {
var myIcons = new SVGMorpheus('#iconset');
myIcons.to('mail');
};
我正在使用 SVG Morpheus 根据用户点击来回变换两个图标。我有两个问题。
1) The first icon initially doesn't show up. I realize this is because I put a
display:none
on there but that's how it was shown in the demo. Am I supposed to take off thedisplay:none
styling for the initial icon?2) When I first click on the 'Get in Touch' text, the icon morphs fine. However, when I click the text (now 'Projects') again, the icon doesn't morph back.
我已经为工作图标创建了两个函数来变身为邮件图标,反之亦然。另外,如果有更有效的方法将这两个功能合并为一个功能,我会洗耳恭听。
我哪里做错了?
Fiddle: http://jsfiddle.net/o8u9225q/5/
HTML
<div id="icons">
<svg id="iconset" height="24" width="24" viewbox="0 0 24 24">
<g id="work" style="display:none">
<rect width="6.5" height="6.5"/>
<rect x="8.7" width="6.5" height="6.5"/>
<rect x="17.5" width="6.5" height="6.5"/>
<rect y="8.7" width="6.5" height="6.5"/>
<rect x="8.7" y="8.7" width="6.5" height="6.5"/>
<rect x="17.5" y="8.7" width="6.5" height="6.5"/>
<rect y="17.5" width="6.5" height="6.5"/>
<rect x="8.7" y="17.5" width="6.5" height="6.5"/>
<rect x="17.5" y="17.5" width="6.5" height="6.5"/>
</g>
<g id="mail" style="display:none">
<polygon points="1.1,3.2 6.6,3.2 12.5,3.2 12,12.5"/>
<polygon points="8.7,3.2 15.3,3.2 15.3,9.6 12,12.5"/>
<polygon points="20.5,3.2 23,3.2 12,12.5 13.1,3.2"/>
<polygon points="0,4.2 6.5,14.5 6.5,20.9 0,20.9"/>
<rect x="8.7" y="14.5" width="6.5" height="6.4"/>
<rect x="17.5" y="14.5" width="6.5" height="6.4"/>
<polygon points="0,4.2 12,14.5 6.5,20.9 0,20.9"/>
<rect x="6.3" y="14.5" width="11.4" height="6.4"/>
<polygon points="12,14.5 24,4.2 24,20.9 17.5,20.9"/>
</g>
</svg>
</div>
<a id="contact-button" href="#">Get in touch</a>
JS
var c = 0;
function morphWork() {
var myIcons = new SVGMorpheus('#iconset');
myIcons.to('mail');
};
function morphMail() {
var myIcons = new SVGMorpheus('#iconset');
myIcons.to('work');
};
$('#contact-button').click(function (e) {
e.preventDefault();
if (c++ % 2 == 0) {
$(this).addClass('project-button').text('Projects');
morphMail();
} else {
$(this).removeClass('project-button').text('Get in touch');
morphWork();
}
});
想通了。猜猜我只能使用 var myIcons = new SVGMorpheus('#iconset');
一次。这是最终结果:http://jsfiddle.net/o8u9225q/6/
制作你的第一个图标display:block;
。而不是一键调用这两个函数,使它们成为不同的 click
函数。
要获取邮件图标,您必须更改邮件功能。
function morphWork() {
var myIcons = new SVGMorpheus('#iconset');
myIcons.to('mail');
};
function morphMail() {
var myIcons = new SVGMorpheus('#iconset');
myIcons.to('work');
};
至此
function morphWork() {
var myIcons = new SVGMorpheus('#iconset');
myIcons.to('work');
};
function morphMail() {
var myIcons = new SVGMorpheus('#iconset');
myIcons.to('mail');
};