用<svg viewBox =“”>(对象的oder)分层的html对象

时间:2015-07-21 13:02:51

标签: html css html5 svg

我目前正在创建一个具有svg叠加层的图像,该叠加层通过鼠标悬停进行交互。我的问题是,我需要为标题分配(在&lt; h2&gt;中)一个链接 - 以及指定通过&lt;创建的菜单项的链接。按钮&GT;

如果我将此链接分配给first-&lt;一个&GT;然而,它取代了我可以分配给按钮的所有链接。 (每次点击都会导致分配给第一个&lt; a&gt; -tag的链接。我尝试使用z-index使按钮位于顶部,但我的猜测是svg元素位于按钮顶部,从而使其成为可能无法点击分配给&lt; button&gt;标记的链接。

有关如何为标题指定可点击链接以及按钮上的链接是否有效的任何想法? (如果我删除了第一个&lt; a&gt; -tag上的href,则按钮上的链接没有问题。)

非常感谢任何想法!

            <a href="\" data-path-hover="m 181,25.69861 0,0.17222  c 0,0.36942 0,10.69861 -0,10.69861 L 0,50 0,0 181,0 Z">
                <figure>
                    <img src="<?php echo esc_url( $stylesheet_directory_uri . '/images/picture.jpg'); ?>"/>
                    <svg viewBox="0 0 180 320" fill="#0092AB" preserveAspectRatio="none"><path d="m 181,170.17857 -56.52362,0.17222 c -45.694531,0.36942 -8.05082,49.60726 -62.096437,47.69861 L 0,218 0,0 181,0 Z"/></svg>
                  <figcaption>      
                        <h2><?php echo $title[$menu_display_item]; ?></h2>
                        <p><?php echo $slogan[$menu_display_item]; ?></p>
                        <?php foreach ( (array) $menu_items as $key => $menu_item ) {
                            if ($menu_item->menu_item_parent == $menu_display_item) echo '<button style="onclick="window.location=\'' . $url[$key] . '\';">' . $title[$key] . '</button>';
                        } ?>
                    </figcaption>
                </figure>
            </a>

0 个答案:

没有答案