URL不在SVG圖形周圍工作

我給了我的標誌在SVG格式，並把<a>標籤圍繞object元素。但是，我的錨標記在svg圖形下未正常顯示10px高度。看看我的代碼，這會給出一個清晰的畫面是什麼我談論..URL不在SVG圖形周圍工作

<a href="#" class="logo"> 
<object data="images/tc_logo.svg" type="image/svg+xml" style="width:100%;"> 
<!--[if (gte IE 6)&(lte IE 8)]> 
    <img src="images/tc_logo.png"> 
<![endif]--> 
</object> 
    </a>

，我給了標誌類作爲display:block但其沒有工作..

CSS

.logo{ 
width: 100%; 
height: 210px; 
display: block; 
cursor:pointer; 
}

EDITS MADE

最後我找到了一個解決方案，我知道它不是正確的方法，但如果你還沒有準備好退後一步的SVG ..試試這個..

使用html這樣的..

<span style="display:block; position:relative;"> 
<a href="#" class="logo"></a> 
    <object data="images/tc_logo.svg" type="image/svg+xml" style="width:100%;"> 
    <!--[if (gte IE 6)&(lte IE 8)]> 
     <img src="images/tc_logo.png"> 
    <![endif]--> 
    </object> 
</span>

和CSS是..

.logo { 
    display: block; 
    height: 210px; 
    position: absolute; 
    width: 100%; 
    z-index:9 
}

希望你得到的伎倆..

來源

2012-12-19 Akhil Paul

任何特定的瀏覽器？在Firefox上工作，雖然沒有使用'svg'，但你可以看看這裏http://jsfiddle.net/KSHtF/ –

@ MR.Alian其實它會工作得很好，如果你不使用SVG圖形。 –

如果你想要這個工作，你需要把鏈接放到svg內容中。你不能把鏈接替換爲這樣的元素，並讓它們工作。 –

這裏是一個醜陋的方式：

<a href="#" class="logo"> 
    <![if gte IE 9]> 
     <img src="images/tc_logo.svg"> 
    <![endif]> 
    <!--[if lt IE 9]> 
     <img src="images/tc_logo.png"> 
    <![endif]--> 
</a>

直播example here。

雖然這在老的android瀏覽器中不起作用，所以最好查看其他選項，比如在檢測到缺少svg支持（需要javascript）時用png替換替換掉所有svgs。參見例如http://css-tricks.com/forums/discussion/19965/svg-with-png-fallback/p1。

來源

2012-12-20 13:58:28

你可以做到這一點使你的SVG成爲一個圖像標籤而不是一個對象標籤，或者你可以逃脫這個輕微的黑客攻擊！

<a href="#" class="logo"> 
    <span style="display: block;"> 
     <object data="images/tc_logo.svg" type="image/svg+xml" style="width:100%;"> 
     <!--[if (gte IE 6)&(lte IE 8)]> 
      <img src="images/tc_logo.png"> 
     <![endif]--> 
     </object> 
    </span> 
</a>

來源

2012-12-19 20:01:16 Fenton

謝謝。我有一個問題史蒂夫..如果我們在圖像標籤IE中使用它有問題，img標籤會在IE中顯示兩次。一個是SVG的空白，另一個是PNG圖像。 –

這是使用圖像標記的退化 - IE向後兼容性是一個問題。在這種情況下，輕微的黑客應該起作用。 – Fenton

史蒂夫，我試過了一個臨時解決方案，看看我的編輯。 –

或者，您可以使用CSS刪除指針事件。該object似乎取代錨標籤事件，因此刪除它似乎重新激活錨標記：

.logo object {pointer-events:none;}

請注意，我只使用Chrome瀏覽器現在做到這一點，沒有任何地方進行測試。

來源

2014-08-04 23:39:11 nathanakers

URL不在SVG圖形周圍工作

回答

相關問題