SVG與聯巴紐不會呈現

https://s3-us-west-2.amazonaws.com/idelog/assets/cultii_logo_final.svg

它包含一個鏈接的巴紐。它本身在瀏覽器中呈現良好（如果您點擊上面的鏈接，就會看到）。

但是當我使用它的IMG標籤裏面，PNG部分不能在任意Chrome或Firefox渲染：

http://plnkr.co/edit/tjNeMgFxpU91q8swBkPX?p=preview

<body> 
    <h1>SVG Demo</h1> 
    <img src="https://s3-us-west-2.amazonaws.com/idelog/assets/cultii_logo_final.svg" /> 
    </body>

我試圖本地和遠程網址鏈接巴紐。我究竟做錯了什麼？

下面是SVG代碼：

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 257 74" enable-background="new 0 0 257 74" xml:space="preserve"> 
<g id="idolore_x5F_icon.psd_1_"> 

     <image overflow="visible" width="287" height="274" id="Layer_1_2_" xlink:href="https://s3-us-west-2.amazonaws.com/idelog/assets/EDEE15BD15B895E0.png" transform="matrix(0.2254 0 0 0.2254 6.3 6.1153)"> 
    </image> 
</g> 
<text transform="matrix(1 0 0 1 78 58)" font-family="'Lora-Bold'" font-size="67">cultii</text> 
</svg>

來源

2015-10-25 metalaureate

您可以嵌入在SVG的PNG。該文件略大，但你得到一個（1）httprequest更少（只有1個圖像文件要維護）。

源：Does SVG support embedding of bitmap images?

編輯

其實你可以試着和哈塞的或雷米斯解決方案相結合這一點。

EDIT2

您可以使用CSS的SVG做到這一點：background-image: url(data:image/svg+xml,...); 但嵌入PNG是否會走，我不能說，但它必須是值得一試

來源

2015-10-25 16:51:09 LGSon

它擴展到162K！ – metalaureate

是的，它會的，你仍然會贏，因爲你只有一個請求。嘗試首先優化PNG ...這裏有幾個應用程序：https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=png%20optimizer%20windows – LGSon

當瀏覽器就會顯示SVG圖像時，將取回所有鏈接的文件。

當從html文檔鏈接到SVG圖像時，它不會獲取鏈接的材質。

你可以嘗試將SVG代碼嵌入到html中，它應該可以在Chrome中使用。

編輯： 我有類似的問題，試圖將SVG圖像嵌入SVG圖像。只要我在Chrome中顯示矢量圖像，但將其放入HTML頁面（< img src =「」>）中，則無法讀取鏈接的文件。我認爲它在我將圖像嵌入到html文件中時起作用（< svg> </svg>）。

這可能是一個安全問題，不允許圖像獲取外部資源。

來源

2015-10-25 16:40:11

的PNG太大而無法嵌入 - 爆炸至162K。 – metalaureate

您也可以使用<object>來嵌入SVG。 MDN Documentation

Plunker Demo

來源

2015-10-25 16:45:14

整潔。有沒有辦法做到這一點在CSS？我的代碼上下文真的是CSS：'background-image：url（）' – metalaureate

SVG與聯巴紐不會呈現

回答

相關問題