我使用Entypo中的某些SVG图标作为我的HTML中的<img>元素。
<img src="svg/Entypo+ Social Extension/twitter-with-circle.svg"></img>
是否可以使用CSS更改此图标的颜色？或者我是否需要编辑SVG本身？
答案 0 :(得分：2)
您需要使用<svg>元素进行内联，然后使用以下命令更改特定路径的颜色：
svg path.myPath {
fill: red !important;
}
以下是一个例子：
svg path {
fill: red !important;
}<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg role="img" aria-label="Code The Web logo" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" id="svg2" viewBox="0 0 622.72601 266.69141" height="266.69141" width="622.72601" inkscape:version="0.91 r13725"
sodipodi:docname="codetheweb-transparent-clipped.svg">
<title>Code The Web logo</title>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1366"
inkscape:window-height="672"
id="namedview17"
showgrid="false"
inkscape:zoom="0.44000089"
inkscape:cx="311.36301"
inkscape:cy="133.3457"
inkscape:window-x="0"
inkscape:window-y="1"
inkscape:window-maximized="1"
inkscape:current-layer="svg2" />
<defs>
<linearGradient xmlns="http://www.w3.org/2000/svg" x1="100%" y1="100%" x2="38.1041974%" y2="38.1041974%" id="pink-theme">
<stop stop-color="#FFC83E" offset="0%"/>
<stop stop-color="#FA709A" offset="100%"/>
</linearGradient>
</defs>
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(-188.63727,-419.01646)"
id="layer1">
<g
transform="matrix(0.48045801,0,0,0.48045801,191.67458,286.97533)"
id="g4184">
<g
style="font-style:normal;font-weight:normal;font-size:184.62117004px;line-height:100%;font-family:sans-serif;text-align:start;letter-spacing:0px;word-spacing:0px;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="text4138">
<path
d="m 392.37834,367.00251 q 0,-12.00037 4.43091,-23.63151 4.61552,-11.63113 13.29272,-20.86219 8.67719,-9.23106 21.04681,-14.95431 12.36962,-5.72326 28.24704,-5.72326 19.01598,0 32.86257,7.93871 14.03121,7.75409 20.86219,20.67757 l -27.50855,19.56985 q -1.84621,-4.80015 -4.98477,-7.93871 -2.95394,-3.13856 -6.64637,-4.98478 -3.69242,-1.84621 -7.75408,-2.58469 -3.87705,-0.73849 -7.56947,-0.73849 -7.75409,0 -13.47735,3.13856 -5.53863,2.95394 -9.23106,7.93871 -3.5078,4.80015 -5.35401,11.07727 -1.66159,6.0925 -1.66159,12.185 0,6.83098 2.03083,13.1081 2.03083,6.27712 5.90788,11.07727 3.87704,4.80016 9.41568,7.75409 5.72325,2.76932 12.73886,2.76932 3.69242,0 7.56947,-0.73848 3.87704,-0.92311 7.38484,-2.76932 3.69243,-2.03083 6.46175,-4.98477 2.95393,-3.13856 4.61552,-7.56947 l 29.35477,17.53901 q -2.95394,7.20023 -9.04644,12.92348 -5.90787,5.72326 -13.66196,9.6003 -7.56947,3.87705 -16.43129,5.90788 -8.67719,2.03083 -16.98515,2.03083 -14.58507,0 -26.77006,-5.72325 -12.00038,-5.90788 -20.8622,-15.50818 -8.67719,-9.6003 -13.47734,-21.7853 -4.80015,-12.185 -4.80015,-24.73924 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4146" />
<path
d="m 583.78145,434.75848 q -14.95431,0 -27.13931,-5.72325 -12.185,-5.72326 -20.86219,-14.95432 -8.6772,-9.41568 -13.47735,-21.41605 -4.80015,-12.00038 -4.80015,-24.73924 0,-12.92348 4.98477,-24.92386 4.98478,-12.00037 13.84659,-21.04681 9.04644,-9.23106 21.23144,-14.58507 12.36961,-5.53864 26.95469,-5.53864 14.95431,0 27.13931,5.72326 12.185,5.72325 20.86219,15.13893 8.6772,9.41568 13.29273,21.41606 4.80015,12.00038 4.80015,24.55461 0,12.92349 -4.98478,24.92386 -4.98477,11.81576 -13.84658,21.04682 -8.86182,9.04643 -21.23144,14.58507 -12.185,5.53863 -26.77007,5.53863 z m -29.72401,-66.46362 q 0,6.64636 1.84622,12.92348 1.84621,6.0925 5.53863,10.89265 3.69242,4.80015 9.23106,7.75409 5.72326,2.95394 13.47734,2.95394 7.75409,0 13.47735,-2.95394 5.72326,-3.13856 9.23106,-7.93871 3.69242,-4.98477 5.35401,-11.26189 1.84621,-6.27712 1.84621,-12.73886 0,-6.64636 -1.84621,-12.73886 -1.84621,-6.27712 -5.72325,-10.89265 -3.69243,-4.80015 -9.41568,-7.56947 -5.53864,-2.95394 -13.10811,-2.95394 -7.75409,0 -13.47734,2.95394 -5.53864,2.95394 -9.23106,7.93871 -3.69242,4.80015 -5.53864,11.07727 -1.66159,6.0925 -1.66159,12.55424 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4148" />
<path
d="m 665.69267,433.65076 0,-131.08103 50.40158,0 q 16.24666,0 28.61628,5.16939 12.36962,5.16939 20.67757,14.03121 8.30795,8.86181 12.55424,20.86219 4.24629,11.81575 4.24629,25.2931 0,14.95432 -4.80015,27.13931 -4.61553,12.00038 -13.29273,20.67757 -8.67719,8.49258 -20.86219,13.29273 -12.185,4.61553 -27.13931,4.61553 l -50.40158,0 z m 79.94096,-65.72514 q 0,-7.56947 -2.03083,-13.84659 -2.03083,-6.27712 -5.90788,-10.70803 -3.69242,-4.4309 -9.23105,-6.83098 -5.53864,-2.58469 -12.36962,-2.58469 l -14.40045,0 0,68.30983 14.40045,0 q 7.0156,0 12.55424,-2.5847 5.53863,-2.58469 9.23106,-7.20022 3.87704,-4.61553 5.72325,-10.89265 2.03083,-6.27712 2.03083,-13.66197 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4150" />
<path
d="m 891.08629,402.26516 0,31.3856 -93.41831,0 0,-131.08103 91.75672,0 0,31.3856 -55.75559,0 0,18.46211 47.63226,0 0,29.17015 -47.63226,0 0,20.67757 57.41718,0 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4152" />
<path
d="m 573.97201,518.57648 -37.66272,0 0,99.69543 -36.00113,0 0,-99.69543 -37.84734,0 0,-31.3856 111.51119,0 0,31.3856 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4154" />
<path
d="m 702.84624,487.19088 0,131.08103 -36.00113,0 0,-51.32468 -43.93984,0 0,51.32468 -36.00113,0 0,-131.08103 36.00113,0 0,48.37075 43.93984,0 0,-48.37075 36.00113,0 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4157" />
<path
d="m 818.78834,586.88631 0,31.3856 -93.41831,0 0,-131.08103 91.75672,0 0,31.3856 -55.75559,0 0,18.46212 47.63226,0 0,29.17014 -47.63226,0 0,20.67757 57.41718,0 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4160" />
<path
d="m 479.16471,671.81204 33.04719,0 11.44651,40.43203 11.63114,-40.43203 33.04719,0 -21.60068,62.58657 9.41568,27.32394 28.24704,-89.91051 39.13969,0 -51.32469,131.08103 -29.90863,0 -18.64674,-46.89378 -18.46211,46.89378 -29.90863,0 -51.32469,-131.08103 38.95507,0 28.43166,89.91051 9.04644,-27.32394 -21.23144,-62.58657 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4162" />
<path
d="m 725.93687,771.50747 0,31.3856 -93.41831,0 0,-131.08103 91.75672,0 0,31.38559 -55.75559,0 0,18.46212 47.63226,0 0,29.17015 -47.63226,0 0,20.67757 57.41718,0 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4164" />
<path
d="m 854.00916,769.29201 q 0,8.86182 -3.69242,15.32356 -3.69243,6.27712 -10.15417,10.33879 -6.46174,4.06166 -15.13893,6.09249 -8.49258,1.84622 -18.09288,1.84622 l -64.43279,0 0,-131.08103 76.06393,0 q 6.83098,0 12.36961,2.95393 5.53864,2.95394 9.41568,7.75409 3.87705,4.61553 5.90788,10.70803 2.21546,5.90788 2.21546,12.185 0,9.23106 -4.80016,17.72363 -4.61552,8.30795 -14.0312,12.55424 11.26189,3.32318 17.72363,11.63113 6.64636,8.12334 6.64636,21.96992 z m -36.55499,-7.38484 q 0,-4.80015 -2.5847,-7.93871 -2.58469,-3.32318 -6.64636,-3.32318 l -29.72401,0 0,21.96991 28.43166,0 q 4.43091,0 7.38485,-2.76931 3.13856,-2.76932 3.13856,-7.93871 z m -38.95507,-59.44802 0,20.12371 24.55462,0 q 3.69242,0 6.64636,-2.03084 3.13856,-2.03083 3.13856,-8.12333 0,-5.35401 -2.5847,-7.56946 -2.58469,-2.40008 -6.0925,-2.40008 l -25.66234,0 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4166" />
</g>
<g
id="text4174"
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:746.07092285px;line-height:125%;font-family:Raleway;-inkscape-font-specification:'Raleway Medium';text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#444444;fill-opacity:1;stroke:#444444;stroke-width:12.68645859;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
<path
id="path4159"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Blackout;-inkscape-font-specification:Blackout;text-align:end;text-anchor:end;fill:#444444;fill-opacity:1;stroke:none;stroke-width:20.81347275;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 365.22161,274.82381 -223.82127,270.07767 223.82127,284.99909 -147.72204,0 L -6.321707,546.39362 217.49957,274.82381 l 147.72204,0 0,0 z" />
</g>
<g
id="text4194"
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:746.07092285px;line-height:125%;font-family:Raleway;-inkscape-font-specification:'Raleway Medium';text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#444444;fill-opacity:1;stroke:#444444;stroke-width:12.68645859;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
<path
id="path4156"
transform="matrix(2.0813473,0,0,2.0813473,-398.94138,-488.31149)"
d="m 632.85156,366.6543 107.53711,136.92968 -107.53711,129.76172 70.97461,0 107.53711,-130.47851 -107.53711,-136.21289 -70.97461,0 z M 747,519.79297 c 0.80996,-0.0316 1.61242,0.039 2.4082,0.21094 l -0.32812,7.29687 c -1.21787,-0.29127 -2.44312,-0.2221 -3.67383,0.20703 -1.25114,0.41197 -2.28005,1.09675 -3.08594,2.05664 -0.60012,0.71482 -1.00546,1.48995 -1.21679,2.32227 -0.21131,0.83233 -0.24033,1.67566 -0.0898,2.5332 0.15055,0.85756 0.47925,1.7095 0.98828,2.55469 0.48866,0.82807 1.15094,1.59387 1.98828,2.29687 0.85778,0.72014 1.73852,1.24999 2.63868,1.5879 0.90015,0.33788 1.78559,0.50607 2.65625,0.50585 0.86738,-0.0378 1.69968,-0.24257 2.5,-0.61523 0.77988,-0.3898 1.48861,-0.96309 2.12304,-1.71875 1.45746,-1.73598 2.02804,-3.86871 1.71289,-6.39648 l -3.16406,3.76953 -4.28906,-3.60157 7.50976,-8.94531 11.58008,9.72266 -4.14062,4.93164 -1.80664,-1.51758 c 0.004,2.64953 -0.84366,4.9859 -2.54102,7.00781 -1.18311,1.40921 -2.56047,2.55063 -4.13086,3.42578 -1.59079,0.85802 -3.26742,1.36356 -5.0332,1.51758 -1.76578,0.15401 -3.58424,-0.0661 -5.45313,-0.66015 -1.86888,-0.59412 -3.69192,-1.63717 -5.46875,-3.12891 -1.53173,-1.28597 -2.71011,-2.76241 -3.53711,-4.43164 -0.84743,-1.68637 -1.33147,-3.43363 -1.45117,-5.24023 -0.14016,-1.82378 0.0799,-3.64028 0.66016,-5.45118 0.57696,-1.84846 1.52544,-3.56021 2.8457,-5.13281 0.82303,-0.98032 1.72402,-1.82514 2.70313,-2.53516 0.95867,-0.72715 1.96988,-1.288 3.0332,-1.68359 1.06002,-0.43315 2.14335,-0.70681 3.25,-0.82226 0.27156,-0.0332 0.54251,-0.0559 0.8125,-0.0664 z m -19.3125,23.53125 c 1.84746,-0.0854 3.65008,0.17341 5.40625,0.77734 1.77331,0.58351 3.35338,1.45904 4.74219,2.625 1.42962,1.20026 2.57684,2.63288 3.4414,4.29883 0.84414,1.64879 1.36632,3.39283 1.56446,5.23047 0.17773,1.82051 -9.9e-4,3.67194 -0.53711,5.55469 -0.51896,1.86232 -1.45598,3.59945 -2.81055,5.21289 -1.38888,1.65428 -2.96568,2.89063 -4.73047,3.70703 -1.76478,0.81639 -3.56162,1.27438 -5.38867,1.37695 -1.84746,0.0854 -3.65833,-0.16258 -5.43164,-0.74609 -1.77334,-0.58351 -3.36425,-1.46729 -4.77344,-2.65039 -1.42965,-1.20026 -2.57684,-2.63288 -3.4414,-4.29883 -0.86457,-1.66594 -1.3848,-3.40999 -1.5625,-5.23047 -0.18098,-1.85807 -0.002,-3.70949 0.5371,-5.55469 0.53613,-1.88275 1.48137,-3.6307 2.83594,-5.24414 1.38885,-1.65428 2.96568,-2.88868 4.73047,-3.70508 1.76479,-0.81641 3.57048,-1.26809 5.41797,-1.35351 z m -0.041,7.32812 c -0.87395,-0.0373 -1.73047,0.13189 -2.56836,0.50782 -0.84114,0.33834 -1.6134,0.92631 -2.3164,1.76367 -0.72014,0.85778 -1.18195,1.74097 -1.38672,2.64844 -0.18763,0.88703 -0.1772,1.76724 0.0312,2.63867 0.18808,0.85427 0.54351,1.67373 1.06641,2.46094 0.51966,0.74963 1.13673,1.42526 1.85156,2.02539 0.73523,0.61726 1.53646,1.11538 2.40234,1.49414 0.84542,0.36158 1.70421,0.56031 2.57813,0.59765 0.87395,0.0373 1.73111,-0.11282 2.57226,-0.45117 0.85833,-0.35877 1.64705,-0.96644 2.36719,-1.82422 0.72018,-0.85778 1.18393,-1.74096 1.38867,-2.64844 0.18434,-0.9246 0.17391,-1.80482 -0.0312,-2.63867 -0.20848,-0.87143 -0.58298,-1.69025 -1.12304,-2.45703 -0.52293,-0.7872 -1.1426,-1.47995 -1.85743,-2.08008 -0.73526,-0.61728 -1.52568,-1.10716 -2.37109,-1.46875 -0.86585,-0.37875 -1.73286,-0.5686 -2.60352,-0.56836 z m -28.07031,19.37696 16.54102,13.88867 8.2832,-9.86524 5.20703,4.37305 -13.29687,15.83789 -21.75,-18.25976 5.01562,-5.97461 z m -7.33984,12.34961 c 0.87065,-2.2e-4 1.73706,0.17057 2.59961,0.51171 0.85934,0.30363 1.63572,0.74711 2.33008,1.33008 1.02119,0.85733 1.77783,1.94588 2.27148,3.26563 0.49039,1.28216 0.53364,2.64218 0.12891,4.07812 1.41354,-0.93718 2.88121,-1.37903 4.40039,-1.32226 1.51591,0.0192 3.03855,0.673 4.57031,1.95898 0.98029,0.82301 1.65742,1.7375 2.0293,2.7461 0.3515,0.99145 0.45161,2.03493 0.30078,3.12695 -0.1508,1.09204 -0.51643,2.21087 -1.09766,3.35937 -0.58449,1.11095 -1.32321,2.19776 -2.21484,3.25977 l -8.97657,10.69141 -21.75,-18.25977 10.59571,-12.62305 c 0.63439,-0.75566 1.3717,-1.30227 2.21289,-1.64062 0.84115,-0.33837 1.70852,-0.49934 2.59961,-0.48242 z m -0.11133,8.09961 c -0.12798,-0.016 -0.25372,-0.0142 -0.375,0.006 -0.50554,0.063 -0.92031,0.28969 -1.24609,0.67773 l -3.57618,4.25781 3.33985,2.80274 3.41992,-4.07422 c 0.34292,-0.40847 0.54016,-0.86938 0.58984,-1.38477 0.0669,-0.53581 -0.2362,-1.08653 -0.91015,-1.65234 -0.44423,-0.37294 -0.85824,-0.58467 -1.24219,-0.63281 z m 8.41797,6.08203 c -0.60765,-0.0227 -1.10129,0.19131 -1.47852,0.64062 l -4.14062,4.93164 3.64648,3.06055 3.95899,-4.7168 c 0.41153,-0.49016 0.60231,-1.02736 0.57031,-1.61133 -0.0147,-0.60439 -0.30886,-1.14685 -0.88086,-1.62695 -0.531,-0.44581 -1.08853,-0.67218 -1.67578,-0.67773 z"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Blackout;-inkscape-font-specification:Blackout;text-align:start;text-anchor:start;fill:#444444;fill-opacity:1;stroke:none;stroke-width:20.81347275;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
</g>
<text
id="text4216"
y="936.22046"
x="133.85828"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;text-align:start;letter-spacing:0px;word-spacing:0px;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
xml:space="preserve"><tspan
y="936.22046"
x="133.85828"
id="tspan4218" /></text>
</g>
</svg>