通過CSS重新使用SVG漸變

Question

所以我知道我可以用css替換svg上的漸變填充，類似於;

<svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <style type="text/css"> 
    rect{fill:url(#GradientSwap1)} 
    </style> 
    <defs> 
    <linearGradient id="GradientSwap1"> 
     <stop offset="5%" stop-color="#F00" /> 
     <stop offset="95%" stop-color="#999" /> 
    </linearGradient> 
    </defs> 

    <rect width="100" height="50"/> 
</svg> 

，並使用納克級的，我可以換出這些梯度的不止一個，但我只能得到它的工作，如果我包括嵌入到每個SVG的DEFS的<linearGradient>。

我的問題是，而我似乎無法弄清楚。有沒有辦法將這些梯度defs從SVG中拉出來，並將它們變成我可以在其他人使用的資源？就像在.NET/XAML世界中一樣，我可以很容易地將它們拉出來，將它們放在資源字典中，並隨時隨地使用相同的字體作爲我喜歡的任何字體。

那麼，是否有相同難題的html5/css3/angular方法？不得不多次重複使用多個SVG以及可能多個相同的Gradient defs的想法聽起來都是錯誤的。

Answer 1

您應該可以定義一次漸變，然後在CSS中調用它以在任何位置應用。你可以申請所有svgs或給它上課。

<svg> 
<defs> 
<linearGradient id="GradientSwap1"> 
    <stop offset="5%" stop-color="#F00"></stop> 
    <stop offset="95%" stop-color="#999"></stop> 
</linearGradient> 
</defs> 

<section> 
<svg class="icon shape-facebook"> 
    <path d="M28.3,62V35.2h-5.5v-9.4h5.6v-7.7c0,0,0.3-9.8,9.8-9.8s9.5,0,9.5,0v9.2H42.1c0,0-2.699,0-2.699,2.7c0,2.7,0,5.8,0,5.8H48 
l-1.1,9.4H39.6V62H28.3z"></path> 
</svg> 
<svg class="icon shape-heart" x="0" y="0"> 
     <path d="M35.645,59.413c0,0,26.949-19.601,26.949-34.12c0-16.752-22.049-22.047-26.949-1.674 
    c-4.9-20.373-26.95-15.078-26.95,1.674C8.695,39.812,35.645,59.413,35.645,59.413z"></path> 
</svg> 

.shape-heart { fill: url('#GradientSwap1'); } 

http://jsfiddle.net/v6osyy5v/1/