我想要use this technique并更改SVG colored颜色 ，但到目前为止我还无法做到这一点.我把它放在CSS中，但我的图像无论如何都是黑色的.
我的代码:
.change-my-color {
fill: green;
}<svg>
<image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" />
</svg>您不能以这种方式更改图像的 colored颜色 .如果将SVG作为图像加载，则不能在浏览器中使用CSS或Javascript更改其显示方式.
如果要更改SVG图像，必须使用<object>、<iframe>或<svg>内联加载.
如果您希望使用页面中的技术，则需要使用现代化库，您可以在其中判断SVG支持，并有条件地显示或不显示备用图像.然后，您可以内联SVG并应用所需的样式.
请参见:
#time-3-icon {
fill: green;
}
.my-svg-alternate {
display: none;
}
.no-svg .my-svg-alternate {
display: block;
width: 100px;
height: 100px;
background-image: url(image.png);
}<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206
C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161
C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505
c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081
c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/>
</svg>
<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />您可以内联SVG，用类名(my-svg-alternate)标记回退图像:
<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" .../>
</svg>
<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />
在CSS中，使用Modernizer的no-svg类(CDN:http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js)判断SVG支持.如果没有SVG支持，SVG块将被忽略，图像将被显示，否则图像将从DOM树中删除(display: none):
.my-svg-alternate {
display: none;
}
.no-svg .my-svg-alternate {
display: block;
width: 100px;
height: 100px;
background-image: url(image.png);
}
然后，您可以更改内联元素的 colored颜色 :
#time-3-icon {
fill: green;
}