blocks|key|1060001|text|使用当前代码，可以设置object元素的填充。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1060002|相反，您需要在svg元素上设置它。|1060003|就像这样：|1060004|.red_color_svg+svg+{
+++fill:+currentColor;
}|code-block|syntax|javascript|1060005|entityMap^0|B|6|0|7|3|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|W|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|X|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

<p>With your current code you set the fill on the <code>object</code> element.</p>

<p>Instead, you need to set it on the <code>svg</code> element.</p>

<p>Something like this:</p>

<pre><code>.red_color_svg svg {
   fill: currentColor;
}
</code></pre>


blocks|key|1060028|text|问题是，您不是针对实际的SVG元素，而是针对"SVG容器“。要能够更改SVG中某个元素的颜色，您必须针对该特定元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1060029|例如，更改SVG中所有路径的填充颜色：|1060030|.weather_icon+path+{
++++fill:+yellow;
}|code-block|syntax|javascript|1060031|如果希望更容易地处理，请向svg中的不同元素添加类名。|1060032|<path+class="my-class"+.........+/>|1060033|这将使其类能够针对特定元素：|1060034|.weather_icon+.my-class+{
++++fill:blue;
++++stroke:green;
}|1060035|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>The problem is that you don't target the actual SVG element, you target the "SVG container". To be able to change the color of one of the elements inside the SVG you have to target that specific element.</p>

<p>E.g change the fill color of all paths in a SVG:</p>

<pre><code>.weather_icon path {
    fill: yellow;
}
</code></pre>

<p>If you want to make it easier to handle add class names to the different elements inside the svg.</p>

<pre><code>&lt;path class="my-class" ......... /&gt;
</code></pre>

<p>This will make it possible to target a specific element by its class:</p>

<pre><code>.weather_icon .my-class {
    fill:blue;
    stroke:green;
}
</code></pre>


blocks|key|1060061|text|CSS不应用交叉文档，这里有两个文档，heart_border.svg和容器html文档。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1060062|您需要在heart_border.svg中包含CSS，例如通过添加<link>元素或<xml-stylesheet>处理指令，或者通过<style>元素将其内联地添加到该文件中。|offset|length|style|CODE|1060063|或者，如果您将SVG内联地添加到html文档本身，以便您只有一个文档，那么CSS就会应用。|1060064|entityMap^0|0|X|6|16|G|1V|7|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]|$D|P|E|Q|F|G]|$D|R|E|S|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|T|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|K|$]]

<p>CSS does not apply cross document and you've two documents here heart_border.svg and the container html document. </p>

<p>You need to include the CSS in heart_border.svg e.g. by adding a <code>&lt;link&gt;</code> element or an <code>&lt;xml-stylesheet&gt;</code> processing instruction or by adding it inline in that file via a <code>&lt;style&gt;</code> element.</p>

<p>Alternatively if you add the SVG inline in the html document itself so that you only have one document the CSS will then apply.</p>


blocks|key|566291|text|你真的需要SVG作为外部文件吗？您可能需要将svg放在本地文档中一次。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|566292|<div+style="display:+none">
++++<svg><g+id="svg1"><path+d="some+exampe+path"/></g></svg>
</div>|code-block|syntax|javascript|566293|并在几个地方链接到它|566294|<svg+viewBox="0+0+64+64"><use+xlink:href="#svg1"></use></svg>|566295|比您可以将每个链接分别样式设置为|566296|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Do you really need SVG to be external file? you might want to put svg locally once in document. </p>

<pre><code>&lt;div style="display: none"&gt;
    &lt;svg&gt;&lt;g id="svg1"&gt;&lt;path d="some exampe path"/&gt;&lt;/g&gt;&lt;/svg&gt;
&lt;/div&gt;
</code></pre>

<p>And link to it in several places</p>

<pre><code>&lt;svg viewBox="0 0 64 64"&gt;&lt;use xlink:href="#svg1"&gt;&lt;/use&gt;&lt;/svg&gt;
</code></pre>

<p>Than you can style every link separately</p>


blocks|key|566332|text|这个线程是旧的，但是我想分享我的解决方案，基于SVG过滤器。您只需根据需要定义一个feColorMatrix过滤器，并将其应用于外部图像。有关更多细节，请参见下面的示例。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|566333|兼容任何可以处理SVG的浏览器。|566334|​|566335|<svg+width="100%25"+height="100%25"+class="draggable">
++<defs>
++++<filter+id="customColor1">
++++++
++++++<feColorMatrix
++++++++in="SourceGraphic"
++++++++type="matrix"
++++++++values="0+0+0+0+0.3333333333333333+0+0+0+0+0+0+0+0+0+0.6666666666666666+0+0+0+1+0"
++++++></feColorMatrix>
++++</filter>
++++
++++<filter+id="customColor2">
++++++
++++++<feColorMatrix
++++++++in="SourceGraphic"
++++++++type="matrix"
++++++++values="0+0+0+0+0+0+0+0+0+1+0+0+0+0+0+0+0+0+1+0"
++++++></feColorMatrix>
++++</filter>
++</defs>
++<image+href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg"+width="50"+height="50"></image>
++<image+href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg"+filter="url(#customColor1)"+width="50"+height="50"+x="100"></image>
++<image+href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg"+filter="url(#customColor2)"+width="50"+height="50"+x="200"></image>
++
</svg>|code-block|syntax|javascript|566336|566337|奖金|566338|//+A+little+helper+to+generate+matrix+color+from+source+and+destination+colors
//+To+easily+dive+in+:+https://codepen.io/jacobberglund/pen/ORNQAr
//+To+understand+what's+going+on+here+read+this+article+by+A+List+Apart
//+https://alistapart.com/article/finessing-fecolormatrix/

interface+RgbColor+{
++/**+Values+are+in+percent+(ex:+255,127,0,255+=>+1,0.5,0,1)+*/
++r:+number;
++g:+number;
++b:+number;
++a:+number;
}

export+class+ColorMatrixHelper+{
++public+static+getMatrix(hexColor:+string)+{
++++const+rgbColor:+RgbColor+=+ColorMatrixHelper.hexToRgb(hexColor);
++++return+ColorMatrixHelper.computeMatrixColor(rgbColor);
++}

++//+Inspired+by+this+answer+:+https://stackoverflow.com/a/5624139/11480016
++private+static+hexToRgb(hex3or6):+RgbColor+{
++++//+Expand+shorthand+form+(e.g.+"03F")+to+full+form+(e.g.+"0033FF")
++++const+shorthandRegex+=+/%5E#?([a-f\d])([a-f\d])([a-f\d])$/i;
++++const+hex6+=+hex3or6.replace(shorthandRegex,+(m,+r,+g,+b)+=>+r+%2B+r+%2B+g+%2B+g+%2B+b+%2B+b);

++++var+result+=+/%5E#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex6);
++++const+base+=+1+/+255;
++++return+result
++++++?+{
++++++++++r:+parseInt(result[1],+16)+*+base,
++++++++++g:+parseInt(result[2],+16)+*+base,
++++++++++b:+parseInt(result[3],+16)+*+base,
++++++++++a:+result[4]+?+parseInt(result[4],+16)+*+base+:+1,
++++++++}
++++++:+null;
++}

++private+static+computeMatrixColor(rgbColor:+RgbColor):+string+{
++++let+matrix;
++++if+(rgbColor)+{
++++++//+Ignore+original+colors+and+apply+the+new+one
++++++matrix+=
++++++++`0+0+0+0+${rgbColor.r}+`+%2B+//+Red
++++++++`0+0+0+0+${rgbColor.g}+`+%2B+//+Green
++++++++`0+0+0+0+${rgbColor.b}+`+%2B+//+Blue
++++++++`0+0+0+${rgbColor.a}+0`;+//+Alpha
++++}+else+{
++++++//+Identity+(keep+orignal+colors)
++++++matrix+=
++++++++`1+0+0+0+0+`+%2B+//+Red
++++++++`0+1+0+0+0+`+%2B+//+Green
++++++++`0+0+1+0+0+`+%2B+//+Blue
++++++++`0+0+0+1+0`;+//+Alpha
++++}
++++return+matrix;
++}
}|566339|entityMap^0|N|6|15|D|1S|4|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|13|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|14|8|@]|D|@]|E|$M|N]]|$1|O|3|I|5|6|7|15|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|16|8|@]|D|@]|E|$]]|$1|R|3|S|5|L|7|17|8|@]|D|@]|E|$M|N]]|$1|T|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|U|$]]

<p>This thread is old but I wanted to share my solution, based on <strong>SVG filters</strong>. You just need to define a <strong>feColorMatrix</strong> filter as you want and apply it to the <strong>external image</strong>. See example below for more details.</p>

<p>Compatible with any browsers that can handle SVG.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width="100%" height="100%" class="draggable"&gt;
  &lt;defs&gt;
    &lt;filter id="customColor1"&gt;
      &lt;!-- Match hex color for #50A --&gt;
      &lt;feColorMatrix
        in="SourceGraphic"
        type="matrix"
        values="0 0 0 0 0.3333333333333333 0 0 0 0 0 0 0 0 0 0.6666666666666666 0 0 0 1 0"
      &gt;&lt;/feColorMatrix&gt;
    &lt;/filter&gt;
    
    &lt;filter id="customColor2"&gt;
      &lt;!-- Match hex color for #0F0 --&gt;
      &lt;feColorMatrix
        in="SourceGraphic"
        type="matrix"
        values="0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0"
      &gt;&lt;/feColorMatrix&gt;
    &lt;/filter&gt;
  &lt;/defs&gt;
  &lt;image href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg" width="50" height="50"&gt;&lt;/image&gt;
  &lt;image href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg" filter="url(#customColor1)" width="50" height="50" x="100"&gt;&lt;/image&gt;
  &lt;image href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg" filter="url(#customColor2)" width="50" height="50" x="200"&gt;&lt;/image&gt;
  
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>

<p>[BONUS] </p>

<pre><code>// A little helper to generate matrix color from source and destination colors
// To easily dive in : https://codepen.io/jacobberglund/pen/ORNQAr
// To understand what's going on here read this article by A List Apart
// https://alistapart.com/article/finessing-fecolormatrix/

interface RgbColor {
  /** Values are in percent (ex: 255,127,0,255 =&gt; 1,0.5,0,1) */
  r: number;
  g: number;
  b: number;
  a: number;
}

export class ColorMatrixHelper {
  public static getMatrix(hexColor: string) {
    const rgbColor: RgbColor = ColorMatrixHelper.hexToRgb(hexColor);
    return ColorMatrixHelper.computeMatrixColor(rgbColor);
  }

  // Inspired by this answer : https://stackoverflow.com/a/5624139/11480016
  private static hexToRgb(hex3or6): RgbColor {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    const hex6 = hex3or6.replace(shorthandRegex, (m, r, g, b) =&gt; r + r + g + g + b + b);

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex6);
    const base = 1 / 255;
    return result
      ? {
          r: parseInt(result[1], 16) * base,
          g: parseInt(result[2], 16) * base,
          b: parseInt(result[3], 16) * base,
          a: result[4] ? parseInt(result[4], 16) * base : 1,
        }
      : null;
  }

  private static computeMatrixColor(rgbColor: RgbColor): string {
    let matrix;
    if (rgbColor) {
      // Ignore original colors and apply the new one
      matrix =
        `0 0 0 0 ${rgbColor.r} ` + // Red
        `0 0 0 0 ${rgbColor.g} ` + // Green
        `0 0 0 0 ${rgbColor.b} ` + // Blue
        `0 0 0 ${rgbColor.a} 0`; // Alpha
    } else {
      // Identity (keep orignal colors)
      matrix =
        `1 0 0 0 0 ` + // Red
        `0 1 0 0 0 ` + // Green
        `0 0 1 0 0 ` + // Blue
        `0 0 0 1 0`; // Alpha
    }
    return matrix;
  }
}
</code></pre>


<p>I am trying to use SVG on my web page.</p>

<p>But it's color is black.
So, I want it to be changed.
So, I have done-</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.red_color_svg
{
    color: red;
    border: 5px solid currentColor;
    fill: currentColor;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;object type="image/svg+xml" data="https://rawcdn.githack.com/encharm/Font-Awesome-SVG-PNG/master/black/svg/heart.svg" class="weather_icon red_color_svg circle"&gt;&lt;/object&gt;</code></pre>
</div>
</div>
</p>

<p>To import <strong>heart_border.svg</strong> file and make its color red. But it does not work as you see i the output.</p>

<p>Can anyone help me please to solve this?</p>

<p>Thank you very much in advance for helping.</p>


How to set a External SVG color in HTML using CSS?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我试图在我的网页上使用SVG。但颜色是黑色的。所以，我想要改变它。所以，我做了-​.red_color_svg{    color: red;    border: 5px solid currentColor;    fill: currentColor;}<object type="image/svg+xml" d...

问如何使用CSS在HTML中设置外部SVG颜色？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS在HTML中设置外部SVG颜色？EN