时间戳

首页 > 解决方案 > 如何使文本对象对鼠标透明？

html - 如何使文本对象对鼠标透明？

问题描述

假设我有一个带有嵌入式 SVG 对象的简单 HTML 页面，其中包含一些放置在椭圆上的文本（后者是超链接）：

<html><body>
        <svg>
            <g>
                <a href="http://google.com">
                    <ellipse ry="30" rx="50" cy="100" cx="100" />
                </a>
                <text y="100" x="70" style="fill:#ef0000;font-size: 40">some text</text>
            </g>
        </svg>    
    </body></html>

请注意，当鼠标悬停在文本上时，单击不会执行任何操作：文本对象对于鼠标单击来说是不透明的。如何在不将整个文本转换为超链接的情况下使文本对象对鼠标透明？

标签： htmlsvgclick

解决方案

Pete在评论中建议的解决方案是通过设置取消指针事件style="pointer-events: none;"：

<html><body>
        <svg>
            <g>
                <a href="http://google.com">
                    <ellipse ry="30" rx="50" cy="100" cx="100" />
                </a>
                <text y="100" x="70" style="pointer-events: none;fill:#ef0000;font-size: 40">some text</text>
            </g>
        </svg>    
    </body></html>

推荐阅读