Question

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

所以我在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;
}

请帮我弄清楚为什么它不能在其他浏览器中工作以及如何让它这样做。

Answer 1

尝试将width属性添加到元素。

来自文本的SVG图像剪辑仅在IE11中工作，其他浏览器产生各种结果

1 个答案: