我已经使用SVG元素和一些CSS成功实现了SVG渐变，请参见下文。我有一个黑白的.SVG图像，想将渐变应用于SVG图像的黑色部分。
HTML
<svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
rect{fill:url(#MyGradient)}
</style>
<defs>
<linearGradient id="MyGradient">
<stop offset="5%" stop-color="#F60" />
<stop offset="95%" stop-color="#FF6" />
</linearGradient>
</defs>
<rect width="100" height="50"/>
</svg>
CSS
rect {
cursor: pointer;
shape-rendering: crispEdges;
fill: url(#MyGradient);
}
是否可以将其直接应用于我下载的.svg图像？
答案 0 :(得分：5)
例如，我拍了一个黑白图标
<svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path id="icon" d="M27.981,41.947c0.001,0.019,0.006,0.036,0.006,0.056C27.987,44.21,26.202,46,24,46
s-3.987-1.79-3.987-3.997c0-0.019,0.005-0.036,0.005-0.056C7.267,41.597,4,39.52,4,37.003c0-0.788,0.344-1.53,1.181-2.194
C11.209,28.094,13,29.953,13,20.006c0-6.632,0.271-12.712,8.258-13.807C21.1,5.833,21.01,5.431,21.01,5.008
c0-1.656,1.339-2.998,2.99-2.998s2.99,1.342,2.99,2.998c0,0.423-0.09,0.825-0.248,1.191C34.729,7.294,35,13.374,35,20.006
c0,9.977,1.8,8.073,7.872,14.86C43.666,35.516,44,36.237,44,37.003C44,39.518,40.647,41.595,27.981,41.947z M24,44.003
c1.102,0,1.994-0.895,1.994-1.998c0-0.006-0.002-0.012-0.002-0.018c-0.651,0.009-1.296,0.019-1.992,0.019s-1.34-0.01-1.992-0.019
c0,0.006-0.002,0.012-0.002,0.018C22.006,43.108,22.898,44.003,24,44.003z M24,4.007c-0.551,0-0.996,0.447-0.996,0.999
s0.445,1,0.996,1s0.997-0.448,0.997-1S24.551,4.007,24,4.007z M41.605,36.414c0,0-1.522-1.714-4.018-3.984
C34.179,29.325,33,27.853,33,20.006c0-7.664-0.418-12-9-12s-9,4.336-9,12c0,7.848-1.18,9.321-4.59,12.427
c-2.447,2.229-3.986,3.942-3.986,3.942C6,36.712,6,36.908,6,37.003c0,0.123,0.205,3.003,18,3.003s18-2.88,18-3.003
C42,36.923,42,36.736,41.605,36.414z">
</path>
</svg>
并对其应用渐变
#icon {
cursor: pointer;
shape-rendering: crispEdges;
fill: url(#MyGradient);
}<svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="MyGradient">
<stop offset="5%" stop-color="#F60" />
<stop offset="95%" stop-color="#FF6" />
</linearGradient>
</defs>
<path id="icon" d="M27.981,41.947c0.001,0.019,0.006,0.036,0.006,0.056C27.987,44.21,26.202,46,24,46
s-3.987-1.79-3.987-3.997c0-0.019,0.005-0.036,0.005-0.056C7.267,41.597,4,39.52,4,37.003c0-0.788,0.344-1.53,1.181-2.194
C11.209,28.094,13,29.953,13,20.006c0-6.632,0.271-12.712,8.258-13.807C21.1,5.833,21.01,5.431,21.01,5.008
c0-1.656,1.339-2.998,2.99-2.998s2.99,1.342,2.99,2.998c0,0.423-0.09,0.825-0.248,1.191C34.729,7.294,35,13.374,35,20.006
c0,9.977,1.8,8.073,7.872,14.86C43.666,35.516,44,36.237,44,37.003C44,39.518,40.647,41.595,27.981,41.947z M24,44.003
c1.102,0,1.994-0.895,1.994-1.998c0-0.006-0.002-0.012-0.002-0.018c-0.651,0.009-1.296,0.019-1.992,0.019s-1.34-0.01-1.992-0.019
c0,0.006-0.002,0.012-0.002,0.018C22.006,43.108,22.898,44.003,24,44.003z M24,4.007c-0.551,0-0.996,0.447-0.996,0.999
s0.445,1,0.996,1s0.997-0.448,0.997-1S24.551,4.007,24,4.007z M41.605,36.414c0,0-1.522-1.714-4.018-3.984
C34.179,29.325,33,27.853,33,20.006c0-7.664-0.418-12-9-12s-9,4.336-9,12c0,7.848-1.18,9.321-4.59,12.427
c-2.447,2.229-3.986,3.942-3.986,3.942C6,36.712,6,36.908,6,37.003c0,0.123,0.205,3.003,18,3.003s18-2.88,18-3.003
C42,36.923,42,36.736,41.605,36.414z">
</path>
</svg>
如果我正确理解了您的问题，则希望直接在SVG文件中应用渐变。
但是从外部样式表应用渐变的第一种方法更可取。
下面是有关如何在svg文件中应用渐变的代码：
<svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="MyGradient">
<stop offset="5%" stop-color="#F60" />
<stop offset="95%" stop-color="#FF6" />
</linearGradient>
</defs>
<path id="icon" style="fill:url(#MyGradient);" d="M27.981,41.947c0.001,0.019,0.006,0.036,0.006,0.056C27.987,44.21,26.202,46,24,46
s-3.987-1.79-3.987-3.997c0-0.019,0.005-0.036,0.005-0.056C7.267,41.597,4,39.52,4,37.003c0-0.788,0.344-1.53,1.181-2.194
C11.209,28.094,13,29.953,13,20.006c0-6.632,0.271-12.712,8.258-13.807C21.1,5.833,21.01,5.431,21.01,5.008
c0-1.656,1.339-2.998,2.99-2.998s2.99,1.342,2.99,2.998c0,0.423-0.09,0.825-0.248,1.191C34.729,7.294,35,13.374,35,20.006
c0,9.977,1.8,8.073,7.872,14.86C43.666,35.516,44,36.237,44,37.003C44,39.518,40.647,41.595,27.981,41.947z M24,44.003
c1.102,0,1.994-0.895,1.994-1.998c0-0.006-0.002-0.012-0.002-0.018c-0.651,0.009-1.296,0.019-1.992,0.019s-1.34-0.01-1.992-0.019
c0,0.006-0.002,0.012-0.002,0.018C22.006,43.108,22.898,44.003,24,44.003z M24,4.007c-0.551,0-0.996,0.447-0.996,0.999
s0.445,1,0.996,1s0.997-0.448,0.997-1S24.551,4.007,24,4.007z M41.605,36.414c0,0-1.522-1.714-4.018-3.984
C34.179,29.325,33,27.853,33,20.006c0-7.664-0.418-12-9-12s-9,4.336-9,12c0,7.848-1.18,9.321-4.59,12.427
c-2.447,2.229-3.986,3.942-3.986,3.942C6,36.712,6,36.908,6,37.003c0,0.123,0.205,3.003,18,3.003s18-2.88,18-3.003
C42,36.923,42,36.736,41.605,36.414z">
</path>
</svg>
注释中的问题补充
如果您的SVG图像具有几种基本形状：线条，矩形，圆形，补丁，然后将它们与组标签<g>包裹在一起，然后对其应用渐变。
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100" height="50" version="1.1">
<defs>
<linearGradient id="MyGradient">
<stop offset="5%" stop-color="#F60" />
<stop offset="95%" stop-color="#FF6" />
</linearGradient>
</defs>
<g style="fill:none;stroke-width:2; stroke:url(#MyGradient); " >
<path d="M28 41.9c0 0 0 0 0 0.1C28 44.2 26.2 46 24 46s-4-1.8-4-4c0 0 0 0 0-0.1C7.3 41.6 4 39.5 4 37c0-0.8 0.3-1.5 1.2-2.2C11.2 28.1 13 30 13 20c0-6.6 0.3-12.7 8.3-13.8C21.1 5.8 21 5.4 21 5c0-1.7 1.3-3 3-3s3 1.3 3 3c0 0.4-0.1 0.8-0.2 1.2C34.7 7.3 35 13.4 35 20c0 10 1.8 8.1 7.9 14.9C43.7 35.5 44 36.2 44 37 44 39.5 40.6 41.6 28 41.9zM24 44c1.1 0 2-0.9 2-2 0 0 0 0 0 0 -0.7 0-1.3 0-2 0s-1.3 0-2 0c0 0 0 0 0 0C22 43.1 22.9 44 24 44zM24 4c-0.6 0-1 0.4-1 1s0.4 1 1 1 1-0.4 1-1S24.6 4 24 4zM41.6 36.4c0 0-1.5-1.7-4-4C34.2 29.3 33 27.9 33 20c0-7.7-0.4-12-9-12s-9 4.3-9 12c0 7.8-1.2 9.3-4.6 12.4 -2.4 2.2-4 3.9-4 3.9C6 36.7 6 36.9 6 37c0 0.1 0.2 3 18 3s18-2.9 18-3C42 36.9 42 36.7 41.6 36.4z" />
<path d="M7.8 8.3 41.5 45.4v0" />
<rect width="19" height="16.1" x="51.5" y="6.8" />
<ellipse cx="86.2" cy="34.4" rx="7.7" ry="7.8" />
</g>
</svg>