SVG图标只变形一次,不会变形

时间:2015-01-12 09:51:18

标签: javascript jquery css svg

我使用SVG Morpheus根据用户点击来回变换两个图标。我有两个问题。

  

1)第一个图标最初没有显示出来。我意识到这是因为   我在那里放了一个display:none,但那是如何显示的。{1}}   演示。我是否应该取消display:none样式作为初始图标?

     

2)当我第一次点击“联系”时文字,图标变形   精细。但是,当我再次单击文本(现在' Projects')时,图标   不会变形。

我已经为工作图标创建了两个功能,以转换为邮件图标,反之亦然。此外,如果有一种更有效的方法将这两个功能合并为一个,我全都是耳朵。

我哪里出错?

小提琴: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();
    }
});

2 个答案:

答案 0 :(得分:1)

想出来。猜猜我只能使用var myIcons = new SVGMorpheus('#iconset');一次。这是最终结果:http://jsfiddle.net/o8u9225q/6/

答案 1 :(得分:-1)

制作第一个图标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');
    };