来自文本的 SVG 图像剪辑仅适用于 IE11，其他浏览器会产生各种结果

debugcn 发表于 Dev

来自

嗨，所以我尽最大努力对我的问题进行了几个不同的关键字搜索，但我似乎找不到任何以前的帖子，所以我发布了这个。如果我错过了一个类似的请原谅我并指导我。

所以我在 img 上使用 SVG 来剪辑文本作为我的小型家庭项目网站的标题。它在 Windows 上的 Internet Explorer 11 中产生了完全期望的结果。问题是，它在其他浏览器上产生非常不同的结果，例如：

WIN - IE 11            = "Dal's Domain" <- desired result
WIN - Edge v38         = "Dal's D"
WIN - Firefox (newest) = "Dal's D"
WIN - Chrome v58       = "Dal's D"
MAC - Chrome v49       = "[blank]"

这是我的网站：DStealth.com

供快速参考：

HTML

<div id="title-wrapper">
  <svg id="image-svg">
    <image id="title-img" height="530" width="530" href="z_index/pics/clouds.jpg" alt="Dal's Domain" />
  </svg>
</div>

<svg id="svg-defs">
    <defs>
        <clipPath id="clip-text">
            <text x="0" y="58" textLength="530px" lengthAdjust="spacingAndGlyphs" font-family="Bank Gothic" font-size="72px" font-weight="500" font-style="normal">Dal's Domain</text>
        </clipPath>
    </defs>
</svg>

CSS

#title-wrapper {
    position: relative;
    float: right;
    width: 530px;
    height: 70px;
    margin: 20px 20px 0px 0px;
    white-space: nowrap;
    background: #FBFCFE;
    border-radius:10px 10px 10px 10px;
    border: 2px solid #6685B7;
}
#image-svg { left: 0px; top: 0px; }
#title-img { clip-path: url(#clip-text); -webkit-clip-path:url(#clip-text); }
#svg-defs { 
    width: 0px;
    height: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
}

请帮我弄清楚为什么它在其他浏览器中不起作用以及我如何才能做到这一点。

Yudi Chang

尝试向元素添加宽度属性。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。