SVG spritesheet與CSS

Question

我一直在試圖尋找通過CSS作爲背景圖像處理SVG元素的解決方案定位：

.icon.arrow-down 
{ 
    background-image: url('images/spritesheet.svg#arrow-down'); 
} 

我使用:target直接在SVG文件，以定位組合SVG spritesheet中的特定圖層（或「組」）。

<?xml version="1.0" encoding="utf-8" ?> 
<svg class="icon" id="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50"> 
    <defs> 
     <style> 
      rect, line { shape-rendering: crispEdges; } 
      svg .icon { display: none; } 
      svg .icon:target { display: inline; } 
     </style> 
    </defs> 

    <!-- Arrows --> 
    <g class="icon" id="arrow-down" transform="translate(0,12.5)"> 
     <path fill="#F00" d="M 0,0 50,0 25,25 z" /> 
    </g> 
    <g class="icon" id="arrow-up" transform="translate(0,12.5)"> 
     <path fill="#F00" d="M 0,25 50,25 25,0 z" /> 
    </g> 
    ... 
</svg> 

這對Firefox和IE9 +工作正常，但在Chrome它似乎忽略#profile部分。但是，直接在瀏覽器中使用目標ID轉到SVG表格會生成正確的圖像。

這是Chrome瀏覽器在背景圖片中處理:target的錯誤嗎？

我試圖避免必須將所有內容分離到自己的文件中，因此只有一個資源被下載，但我不知道它是可能的。

注意如何圖標都無法在Chrome中顯示，但在其他瀏覽器：http://jsfiddle.net/sYL5F/1/

Answer 1

這是一個衆所周知的問題，是特定於使用它作爲背景，顯然不會因爲安全問題是固定的（ Opera也不顯示它）。如果您直接查看SVG，它可以像您期望的那樣工作。

https://code.google.com/p/chromium/issues/detail?id=128055#c6

SVG棧將不支持採取​​CSS圖片 值的CSS屬性。這包括但不限於背景圖像， 蒙版圖像，邊界圖像。

這是SVG和CSS工作組在解析 CSS時在資源 （如SVG漸變，遮罩，clipPath）和圖像值之間的差異的分辨率。這是保護用戶隱私和安全的安全要求。

更多信息請參見下面的討論：

http://lists.w3.org/Archives/Public/www-style/2012Oct/0406.html

http://lists.w3.org/Archives/Public/www-style/2012Oct/0765.html

你只是要處理您的SVG同樣的方式將一個老式的精靈地圖。

Answer 2

對於我的最新項目，我已經實現了自己的方式，使用我一直在研究的PHP MVC框架創建自定義SVG參數。從本質上講，我創建了一個控制器連接到圖標：

/icon/NAME_OF_ICON.svg?color=F00 

我icon控制器需要的文件名和注入的GET參數到SVG文件。

//define(ROOT, "path/to/webroot"); 
//$filename = ...get filename from URL...; 

$svg = simplexml_load_file(ROOT . "/assets/icons/{$filename}"); 
if(isset($_GET['color'])) 
{ 
    $svg->path->addAttribute('fill', '#' . $_GET['color']); 
} 

header("Content-type: image/svg+xml"); 
echo $svg->asXML(); 

我將添加代碼來緩存查詢的自定義SVG，最終。