不與佈局

干擾在線HTML5 SVG過濾器，我需要以下聯SVG過濾器注入到我的HTML5文件：不與佈局

<svg> 
    <defs> 
     <filter id="grayscale"> 
      <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"> 
     </filter> 
    </defs> 
</svg>

我試圖將其置於<html>標籤之外，但並沒有工作。根據我放置的位置，它在顯示頁面的開始或結束處留下大量空白區域。

我試圖把它放在<head>或啓動<body>標籤，但是這會在所顯示的文檔的開始是一片空白空間，以及。

SVG對象上的設置display: none;將阻止過濾器工作。

我自己也嘗試設置<svg>的width和height屬性設爲零，但這隻適用於如果我設定SVG對象CSS來display: block;。

例如：

<!DOCTYPE html> 
<html> 
    <head> 
     ... 
     <svg> ... </svg> 
    </head> 
    ... 
</html>

目前，我臨時的解決辦法是使用CSS來試圖隱藏它：

svg { 
    height: 0; 
    position: absolute; 
}

如何防止SVG對象從我的HTML佈局干擾（沒有使用這個CSS技巧）？

jsFiddle example

來源

2012-08-12 Daniel

由於似乎沒有其他選擇，至少在當前的技術下，我必須回答：不，不可能阻止SVG對象干擾HTML佈局，除非其中之一使用上面的CSS黑客。

由於在原來的職位說明，隱藏SVG元素（不含禁用濾波器）的唯一方法是：

設置<svg>標籤的height和width到零，然後設置其CSS到display: block。
設置<svg>標籤的CSS來height: 0; position: absolute;

來源

2012-10-11 19:48:10 Daniel

我還不能肯定這個工作，但SVG元素允許width和height屬性（如img標籤）。所以嘗試：svg width="0" height="0"

來源

2012-08-13 06:45:20 Duopixel

我已經提到此修復程序在我的問題。我仍然需要將SVG元素的CSS設置爲'display：block;'或者'width'和'height'不會有任何效果。不過，我確實認爲這個解決方案比我目前純粹的CSS黑客更加優雅。 – Daniel 2012-08-13 13:05:08

回答

相關問題