Question

我有一些像这样的HTML：

<a title="Close">
    <svg role="img" class="icon">
        <title>Close</title>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/images/sprites.svg#close-small-icon">
            <svg id="close-small-icon" viewBox="0 0 9 9" width="100%" height="100%">
                <title>ic-close small</title>
                ...
            </svg>
        </use>
    </svg>
</a>

我希望工具提示显示＆＃39;关闭＆＃39;。但是，在Chrome中，它目前显示为＆＃c; ic-close small＆＃39;。为什么这样，有没有办法让这个工作没有删除内部SVG标题标签？

Answer 1

<use>没有子元素。您的代码段是否表示<svg>引用内部<use>？

您应该可以通过将<title>添加到内部SVG来禁用pointer-events="none"弹出窗口。但我想这对你来说不是解决方案，因为听起来你无法修改SVG（？）

＆＃13;

<a title="Close">
    <svg role="img" class="icon">
        <title>Close</title>
        <svg id="close-small-icon" viewBox="0 0 9 9"
             width="100%" height="100%"
             pointer-events="none">
            <title>ic-close small</title>
            <circle cx="4.5" cy="4.5" r="4" fill="red"/>
        </svg>
    </svg>
</a>

＆＃13;

包装元素的标题属性被SVG的标题属性覆盖

1 个答案: