svg元素作为按钮

时间:2017-12-01 04:39:44

标签: javascript jquery html svg

我目前正在为我的某个课程开设一个网站项目,但我遇到了一些障碍。

我创建了一个嵌入了某些检查点的图像,并希望我的用户能够点击这些检查点并触发带有字段集的模态或窗口内框。

我要尝试包含所有相关内容!

我删除了中间的大部分内容,所以我的基本代码有点像:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('#button-trigger').click(function(){
            $(this).next('#button-content').slideToggle();
            $(this).toggleClass('active');

            if ($(this).hasClass('active')) 
                $(this).find('span').html('&#x25B2;')
            else 
                $(this).find('span').html('&#x25BC;')
        })
    });
</script>

<svg version>
    <style type>
        <image style>pregenerated things</image>
        <g id="Element1">
            <button><g>pregenerated things specifically about the image</g></button>
        </g>
        <g id="Element2">
            <a id="button-trigger" href="#"><g>pregenerated things specifically about the image</g></a>
            <div id="button-content">
                <fieldset id="input">
                <input type="text">
                </fieldset>
            </div>
        </g>
    </style type>
<svg>

当试图将这些标签转换为我所显示的按钮时,该元素就会消失,我真的不知道该怎么做。使用jquery时,我可以保持元素可见并且链接,但它没有显示我在CSS中创建的窗口(我从另一个正在工作的窗口复制并粘贴该代码)。

有什么想法?有一个更好的方法吗?我只是谷歌搜索的东西,并试图强行进入我的网站,使其功能。

0 个答案:

没有答案