來自文本的SVG圖像剪輯僅在IE11中有效，其他瀏覽器產生各種結果

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屬性添加到元素。