blocks|key|251977|text|在<image>标记中使用时，出于隐私原因，SVG必须包含在单个文件中。这篇bugzilla+bug有更多关于为什么会这样的详细信息。不幸的是，您不能使用不同的标记，比如<iframe>，因为它不能作为链接使用，所以您必须将CSS嵌入到文件本身的<style>标记中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|251978|另一种方法是将SVG数据放在主html文件中，即|251979|<a+href='http://youtube.com/...'+target='_blank'>
++<svg+id="Layer_1"+xmlns="http://www.w3.org/2000/svg"+xmlns:xlink="http://www.w3.org/1999/xlink"+viewBox="0+0+56.69+56.69">
++++<g>
++++++++<path+d="M28.44......./>
++++</g>
++</svg>
</a>|code-block|syntax|javascript|251980|您可以使用HTML标记通过外部<link>文件对其进行样式设置。|251981|entityMap|0|LINK|mutability|MUTABLE|url|https://bugzilla.mozilla.org/show_bug.cgi?id=628747^0|1|7|2D|8|3F|7|12|C|0|0|0|0|F|6|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>When used in an <code>&lt;image&gt;</code> tag SVG must be contained in a single file for privacy reasons. This <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=628747" rel="nofollow">bugzilla bug</a> has more details on exactly why this is so. Unfortunately you can't use a different tag such as an <code>&lt;iframe&gt;</code> because that won't work as a link so you'll have to embed the CSS in a <code>&lt;style&gt;</code> tag within the file itself.</p>

<p>One other way to do this would be to have the SVG data within the main html file i.e.</p>

<pre><code>&lt;a href='http://youtube.com/...' target='_blank'&gt;
  &lt;svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69"&gt;
    &lt;g&gt;
        &lt;path d="M28.44......./&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
&lt;/a&gt;
</code></pre>

<p>You could style that with an external CSS file using the HTML <code>&lt;link&gt;</code> tag.</p>


blocks|key|35502|text|只有当main.css文件内联包含在HTML中时，它才会对SVG的内容产生影响：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|35503|https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction|offset|length|35504|<html>
++<body>
++<svg+version="1.1"+id="Layer_1"+xmlns="http://www.w3.org/2000/svg"+xmlns:xlink="http://www.w3.org/1999/xlink"+viewBox="0+0+56.69+56.69">
++++<g>
++++++<path+d="M28.44......."/>
++++</g>
++</svg>
</html>|code-block|syntax|javascript|35505|如果希望将SVG保存在文件中，则需要在SVG文件中定义CSS。|35506|您可以使用样式标记来完成此操作：|35507|http://www.w3.org/TR/SVG/styling.html#StyleElementExample|35508|<!DOCTYPE+svg+PUBLIC+"-//W3C//DTD+SVG+1.1//EN"+
++"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg+xmlns="http://www.w3.org/2000/svg"+version="1.1"
+++++width="50px"+height="50px"+viewBox="0+0+50+50">
++<defs>
++++<style+type="text/css"><![CDATA[
++++++.socIcon+g+{
++++++++fill:red;
++++++}
++++]]></style>
++</defs>
++<g>
++++<path+d="M28.44......./>
++</g>
</svg>|35509|您可以使用服务器端的工具来更新样式标记，具体取决于活动样式。在ruby中，你可以使用Nokogiri来实现这一点。SVG就是XML。因此，可能有许多可用的XML库可以实现这一点。|35510|如果您不能做到这一点，您将不得不像使用PNG一样使用它们；为每个样式创建一个集合，并以内联方式保存它们的样式。|35511|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|1Q|0|0|0|0|0|0|1L|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@$D|16|E|17|1|18]]|A|$]]|$1|F|3|G|5|H|7|19|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|1A|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1C|8|@]|9|@$D|1D|E|1E|1|1F]]|A|$]]|$1|Q|3|R|5|H|7|1G|8|@]|9|@]|A|$I|J]]|$1|S|3|T|5|6|7|1H|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1I|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|C]]|13|$5|Z|10|11|A|$12|P]]]]

<p>Your main.css file would only have an effect on the content of the SVG if the SVG file is included inline in the HTML:</p>
<p><a href="https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction" rel="noreferrer">https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction</a></p>
<pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;svg version=&quot;1.1&quot; id=&quot;Layer_1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; viewBox=&quot;0 0 56.69 56.69&quot;&gt;
    &lt;g&gt;
      &lt;path d=&quot;M28.44.......&quot;/&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
&lt;/html&gt;
</code></pre>
<p>If you want to keep your SVG in files, the CSS needs to be defined inside of the SVG file.</p>
<p>You can do it with a style tag:</p>
<p><a href="http://www.w3.org/TR/SVG/styling.html#StyleElementExample" rel="noreferrer">http://www.w3.org/TR/SVG/styling.html#StyleElementExample</a></p>
<pre><code>&lt;!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot; 
  &quot;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&quot;&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot;
     width=&quot;50px&quot; height=&quot;50px&quot; viewBox=&quot;0 0 50 50&quot;&gt;
  &lt;defs&gt;
    &lt;style type=&quot;text/css&quot;&gt;&lt;![CDATA[
      .socIcon g {
        fill:red;
      }
    ]]&gt;&lt;/style&gt;
  &lt;/defs&gt;
  &lt;g&gt;
    &lt;path d=&quot;M28.44......./&gt;
  &lt;/g&gt;
&lt;/svg&gt;
</code></pre>
<p>You could use a tool on the server side to update the style tag depending on the active style.  In ruby you could achieve this with Nokogiri. SVG is just XML. So there are probably many XML libraries available that can probably achieve this.</p>
<p>If you're not able to do that, you will have to just have to use them as though they were PNGs; creating a set for each style, and saving their styles inline.</p>


blocks|key|35539|text|首先内联外部svg图像应该是可行的。下面的代码来自Jess+Frazelle的replace+all+SVG+images+with+inline+SVG。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|35540|$('img.svg').each(function(){
++var+$img+=+$(this);
++var+imgID+=+$img.attr('id');
++var+imgClass+=+$img.attr('class');
++var+imgURL+=+$img.attr('src');
++$.get(imgURL,+function(data)+{
++++//+Get+the+SVG+tag,+ignore+the+rest
++++var+$svg+=+$(data).find('svg');
++++//+Add+replaced+image's+ID+to+the+new+SVG
++++if+(typeof+imgID+!==+'undefined')+{
++++++$svg+=+$svg.attr('id',+imgID);
++++}
++++//+Add+replaced+image's+classes+to+the+new+SVG
++++if+(typeof+imgClass+!==+'undefined')+{
++++++$svg+=+$svg.attr('class',+imgClass%2B'+replaced-svg');
++++}
++++//+Remove+any+invalid+XML+tags+as+per+http:validator.w3.org
++++$svg+=+$svg.removeAttr('xmlns:a');
++++//+Replace+image+with+new+SVG
++++$img.replaceWith($svg);
++});
});|code-block|syntax|javascript|35541|entityMap|0|LINK|mutability|MUTABLE|url|http://snippetlib.com/jquery/replace_all_svg_images_with_inline_svg^0|13|12|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>It should be possible to do by first inlining the external svg images. The code below comes from <a href="http://snippetlib.com/jquery/replace_all_svg_images_with_inline_svg" rel="nofollow noreferrer">replace all SVG images with inline SVG</a> by  Jess Frazelle.</p>

<pre><code>$('img.svg').each(function(){
  var $img = $(this);
  var imgID = $img.attr('id');
  var imgClass = $img.attr('class');
  var imgURL = $img.attr('src');
  $.get(imgURL, function(data) {
    // Get the SVG tag, ignore the rest
    var $svg = $(data).find('svg');
    // Add replaced image's ID to the new SVG
    if (typeof imgID !== 'undefined') {
      $svg = $svg.attr('id', imgID);
    }
    // Add replaced image's classes to the new SVG
    if (typeof imgClass !== 'undefined') {
      $svg = $svg.attr('class', imgClass+' replaced-svg');
    }
    // Remove any invalid XML tags as per http:validator.w3.org
    $svg = $svg.removeAttr('xmlns:a');
    // Replace image with new SVG
    $img.replaceWith($svg);
  });
});
</code></pre>


blocks|key|252111|text|您可以做您想做的事情，但有一个(重要的)警告:您的符号中的路径不能通过外部CSS独立地设置样式--您只能使用此方法设置整个符号的属性。因此，如果您的符号中有两个路径，并希望它们具有不同的填充颜色，这将不起作用，但如果您希望所有路径都是相同的，则此方法应该有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|252112|在您的html文件中，您需要如下内容：|252113|<style>
++.fill-red+{+fill:+red;+}
++.fill-blue+{+fill:+blue;+}
</style>

<a+href="//www.example.com/">
++<svg+class="fill-red">
++++<use+xlink:href="images/icons.svg#example"></use>
++</svg>
</a>|code-block|syntax|javascript|252114|在外部SVG文件中，您需要如下内容：|252115|<svg+xmlns="http://www.w3.org/2000/svg">
+++<symbol+id="example"+viewBox="0+0+256+256">
++++<path+d="M120....+/>
++</symbol>
</svg>|252116|将svg标记(在html中)上的类从fill-red交换为fill-blue和ta-da……你用蓝色而不是红色。|offset|length|style|CODE|252117|通过将外部CSS与特定路径上的一些内联CSS混合和匹配，您可以部分地绕过能够使用外部CSS单独定位路径的限制，因为内联CSS将优先。如果你想通过外部CSS改变背景的颜色，但图标本身始终是白色的(反之亦然)，那么这种方法将会起作用。因此，使用与前面相同的HTML和类似于下面的svg代码，您将得到一个红色背景和一个白色前景路径：|252118|<svg+xmlns="http://www.w3.org/2000/svg">
++<symbol+id="example"+viewBox="0+0+256+256">
++++<path+class="background"+d="M120..."+/>
++++<path+class="icon"+style="fill:+white;"+d="M20..."+/>
++</symbol>
</svg>|252119|entityMap^0|0|0|0|0|0|1|3|I|8|T|9|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@$O|14|P|15|Q|R]|$O|16|P|17|Q|R]|$O|18|P|19|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|6|7|1A|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|1B|8|@]|9|@]|A|$G|H]]|$1|W|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|X|$]]

<p>You can do what you want, with one (important) caveat: the paths within your symbol can't be styled independently via external CSS -- you can only set the properties for the entire symbol with this method. So, if you have two paths in your symbol and want them to have different fill colors, this won't work, but if you want all your paths to be the same, this should work.</p>

<p>In your html file, you want something like this:</p>

<pre><code>&lt;style&gt;
  .fill-red { fill: red; }
  .fill-blue { fill: blue; }
&lt;/style&gt;

&lt;a href="//www.example.com/"&gt;
  &lt;svg class="fill-red"&gt;
    &lt;use xlink:href="images/icons.svg#example"&gt;&lt;/use&gt;
  &lt;/svg&gt;
&lt;/a&gt;
</code></pre>

<p>And in the external SVG file you want something like this:</p>

<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
   &lt;symbol id="example" viewBox="0 0 256 256"&gt;
    &lt;path d="M120.... /&gt;
  &lt;/symbol&gt;
&lt;/svg&gt;
</code></pre>

<p>Swap the class on the <code>svg</code> tag (in your html) from <code>fill-red</code> to <code>fill-blue</code> and ta-da... you have blue instead of red.</p>

<p>You can partially get around the limitation of being able to target the paths separately with external CSS by mixing and matching the external CSS with some in-line CSS on specific paths, since the in-line CSS will take precedence. This approach would work if you're doing something like a white icon against a colored background, where you want to change the color of the background via the external CSS but the icon itself is always white (or vice-versa). So, with the same HTML as before and something like this svg code, you'll get you a red background and a white foreground path:</p>

<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;symbol id="example" viewBox="0 0 256 256"&gt;
    &lt;path class="background" d="M120..." /&gt;
    &lt;path class="icon" style="fill: white;" d="M20..." /&gt;
  &lt;/symbol&gt;
&lt;/svg&gt;
</code></pre>


blocks|key|35630|text|您可以采用的一种方法是使用CSS过滤器来更改SVG图形在浏览器中的外观。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|35631|例如，如果您的SVG图形在SVG代码中使用红色填充颜色，则可以使用180度的色调旋转设置将其变为紫色：|35632|#theIdOfTheImgTagWithTheSVGInIt+{
++++filter:+hue-rotate(180deg);
++++-webkit-filter:+hue-rotate(180deg);
++++-moz-filter:+hue-rotate(180deg);
++++-o-filter:+hue-rotate(180deg);
++++-ms-filter:+hue-rotate(180deg);
}|code-block|syntax|javascript|35633|尝试使用其他色调-旋转设置来查找所需的颜色。|35634|需要明确的是，上面的CSS包含在应用于HTML文档的CSS中。您正在设计HTML代码中的img标记的样式，而不是设计SVG代码的样式。|35635|请注意，这不适用于填充为黑色、白色或灰色的图形。你必须在那里有一个实际的颜色来旋转该颜色的色调。|35636|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>One approach you can take is just to use CSS filters to change the appearance of the SVG graphics in the browser.</p>

<p>For example, if you have an SVG graphic that uses a fill color of red within the SVG code, you can turn it purple with a hue-rotate setting of 180 degrees:</p>

<pre><code>#theIdOfTheImgTagWithTheSVGInIt {
    filter: hue-rotate(180deg);
    -webkit-filter: hue-rotate(180deg);
    -moz-filter: hue-rotate(180deg);
    -o-filter: hue-rotate(180deg);
    -ms-filter: hue-rotate(180deg);
}
</code></pre>

<p>Experiment with other hue-rotate settings to find the colors you want.</p>

<p>To be clear, the above CSS goes in the CSS that is applied to your HTML document. You are styling the img tag in the HTML code, not styling the code of the SVG.</p>

<p>And note that this won’t work with graphics that have a fill of black or white or gray. You have to have an actual color in there to rotate the hue of that color.</p>


blocks|key|35674|text|可以通过在JavaScript中动态创建样式元素并将其附加到SVG元素来设置SVG的样式。听起来很奇怪，但很管用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|35675|<object+id="dynamic-svg"+type="image/svg%2Bxml"+data="your-svg.svg">
++++Your+browser+does+not+support+SVG
</object>
<script>
++++var+svgHolder+=+document.querySelector('object#dynamic-svg');
++++svgHolder.onload+=+function+()+{
++++++++var+svgDocument+=+svgHolder.contentDocument;
++++++++var+style+=+svgDocument.createElementNS("http://www.w3.org/2000/svg",+"style");

++++++++//+Now+(ab)use+the+@import+directive+to+load+make+the+browser+load+our+css
++++++++style.textContent+=+'@import+url("/css/your-dynamic-css.css");';

++++++++var+svgElem+=+svgDocument.querySelector('svg');
++++++++svgElem.insertBefore(style,+svgElem.firstChild);
++++};
</script>|code-block|syntax|javascript|35676|如果你愿意，你可以用PHP动态生成JavaScript+--这在JavaScript中是可能的，这打开了无数的可能性。|35677|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>It is possible to style an SVG by dynamically creating a style element in JavaScript and appending it to the SVG element. Hacky, but it works.</p>

<pre><code>&lt;object id="dynamic-svg" type="image/svg+xml" data="your-svg.svg"&gt;
    Your browser does not support SVG
&lt;/object&gt;
&lt;script&gt;
    var svgHolder = document.querySelector('object#dynamic-svg');
    svgHolder.onload = function () {
        var svgDocument = svgHolder.contentDocument;
        var style = svgDocument.createElementNS("http://www.w3.org/2000/svg", "style");

        // Now (ab)use the @import directive to load make the browser load our css
        style.textContent = '@import url("/css/your-dynamic-css.css");';

        var svgElem = svgDocument.querySelector('svg');
        svgElem.insertBefore(style, svgElem.firstChild);
    };
&lt;/script&gt;
</code></pre>

<p>You could generate the JavaScript dynamically in PHP if you want to - the fact that this is possible in JavaScript opens a myriad of possibilities.</p>


blocks|key|35746|text|如果你正在使用<object>标签来嵌入你的svg，一个非常快速的解决方案就是使用外部css样式表来实现动态样式。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|35747|此示例将在单击父元素时向根<svg>标记添加一个类。|35748|file.svg：|35749|<?xml-stylesheet+type="text/css"+href="../svg.css"?>
+<svg+xmlns="http://www.w3.org/2000/svg"+viewBox="">
++<g>
+++<path/>
++</g>
+</svg>|code-block|syntax|javascript|35750|html：|35751|<a+class="parent">
++<object+data="file.svg"></object>
</a>|35752|Jquery：|35753|$(function()+{
++$(document).on('click',+'.parent',+function(){
++++$(this).find('object').contents().find('svg').attr("class","selected");
++}
});|35754|单击父元素：|35755|+<svg+xmlns="http://www.w3.org/2000/svg"+viewBox=""+class="selected">|35756|然后你可以管理你的css|35757|svg.css：|35758|path+{
+fill:none;
+stroke:#000;
+stroke-miterlimit:1.41;
+stroke-width:0.7px;
}

.selected+path+{
+fill:none;
+stroke:rgb(64,+136,+209);
+stroke-miterlimit:1.41;
+stroke-width:0.7px;
}|35759|entityMap^0|7|8|0|D|5|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1E|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1F|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1G|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1H|8|@]|D|@]|E|$M|N]]|$1|S|3|T|5|6|7|1I|8|@]|D|@]|E|$]]|$1|U|3|V|5|L|7|1J|8|@]|D|@]|E|$M|N]]|$1|W|3|X|5|6|7|1K|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|L|7|1L|8|@]|D|@]|E|$M|N]]|$1|10|3|11|5|6|7|1M|8|@]|D|@]|E|$]]|$1|12|3|13|5|6|7|1N|8|@]|D|@]|E|$]]|$1|14|3|15|5|L|7|1O|8|@]|D|@]|E|$M|N]]|$1|16|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]]|17|$]]

<p>A very quick solution to have dynamic style with an external css stylesheet, in case you are using the <code>&lt;object&gt;</code> tag to embed your svg.</p>

<p>This example will add a class to the root <code>&lt;svg&gt;</code> tag on click on a parent element.</p>

<p>file.svg :</p>

<pre><code>&lt;?xml-stylesheet type="text/css" href="../svg.css"?&gt;
 &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox=""&gt;
  &lt;g&gt;
   &lt;path/&gt;
  &lt;/g&gt;
 &lt;/svg&gt;
</code></pre>

<p>html :</p>

<pre><code>&lt;a class="parent"&gt;
  &lt;object data="file.svg"&gt;&lt;/object&gt;
&lt;/a&gt;
</code></pre>

<p>Jquery :</p>

<pre><code>$(function() {
  $(document).on('click', '.parent', function(){
    $(this).find('object').contents().find('svg').attr("class","selected");
  }
});
</code></pre>

<p>on click parent element :</p>

<pre><code> &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="" class="selected"&gt;
</code></pre>

<p>then you can manage your css</p>

<p>svg.css :</p>

<pre><code>path {
 fill:none;
 stroke:#000;
 stroke-miterlimit:1.41;
 stroke-width:0.7px;
}

.selected path {
 fill:none;
 stroke:rgb(64, 136, 209);
 stroke-miterlimit:1.41;
 stroke-width:0.7px;
}
</code></pre>


blocks|key|35787|text|适用于我的方式:使用@import规则设置样式标签|type|unstyled|depth|inlineStyleRanges|entityRanges|data|35788|<defs>
++++<style+type="text/css">
++++++++@import+url("svg-common.css");
++++</style>
</defs>|code-block|syntax|javascript|35789|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>What works for me: style tag with @import rule</p>

<pre><code>&lt;defs&gt;
    &lt;style type="text/css"&gt;
        @import url("svg-common.css");
    &lt;/style&gt;
&lt;/defs&gt;
</code></pre>


blocks|key|35871|text|我知道这是一个古老的帖子，但只是为了解决这个问题…你只是在错误的地方使用你的类:D|type|unstyled|depth|inlineStyleRanges|entityRanges|data|35872|首先，你可以使用|35873|svg+{+fill:+red;+}|code-block|syntax|javascript|35874|在你的main.css里让它变红。这是有效果的。您也可以使用节点选择器来获取特定的路径。|offset|length|style|CODE|35875|第二件事是，您向img-tag声明了类。|35876|<img+class='socIcon'....|35877|实际上，您应该在SVG中声明它。如果你有不同的路径，你当然可以定义更多。|35878|<?xml+version="1.0"+encoding="utf-8"?>
<?xml-stylesheet+href="stylesheets/main.css"+type="text/css"?>
<!DOCTYPE+svg+PUBLIC+"-//W3C//DTD+SVG+1.1//EN"+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg+version="1.1"+id="Layer_1"+xmlns="http://www.w3.org/2000/svg"+xmlns:xlink="http://www.w3.org/1999/xlink"+viewBox="0+0+56.69+56.69">
<g>
++++<path+class="myClassForMyPath"+d="M28.44......./>
</g>
</svg>|35879|现在您可以更改main.css中的颜色，如下所示|35880|.myClassForMyPath+{
++++fill:+yellow;
}|35881|entityMap^0|0|0|0|3|8|0|8|3|0|0|0|0|7|8|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|15|8|@$K|16|L|17|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|18|8|@$K|19|L|1A|M|N]]|9|@]|A|$]]|$1|Q|3|R|5|F|7|1B|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|6|7|1C|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|1D|8|@]|9|@]|A|$G|H]]|$1|W|3|X|5|6|7|1E|8|@$K|1F|L|1G|M|N]]|9|@]|A|$]]|$1|Y|3|Z|5|F|7|1H|8|@]|9|@]|A|$G|H]]|$1|10|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|11|$]]

<p>I know its an old post, but just to clear this problem... you're just using your classes at the wrong place :D</p>
<p>First of all you could use</p>
<pre><code>svg { fill: red; }
</code></pre>
<p>in your <code>main.css</code> to get it red. This does have effect. You could probably use node selectors as well to get specific paths.</p>
<p>Second thing is, you declared the class to the <code>img</code>-tag.</p>
<pre><code>&lt;img class='socIcon'....
</code></pre>
<p>You actually should declare it inside your SVG. if you have different paths you could define more of course.</p>
<pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;?xml-stylesheet href=&quot;stylesheets/main.css&quot; type=&quot;text/css&quot;?&gt;
&lt;!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot; &quot;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&quot;&gt;

&lt;svg version=&quot;1.1&quot; id=&quot;Layer_1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; viewBox=&quot;0 0 56.69 56.69&quot;&gt;
&lt;g&gt;
    &lt;path class=&quot;myClassForMyPath&quot; d=&quot;M28.44......./&gt;
&lt;/g&gt;
&lt;/svg&gt;
</code></pre>
<p>Now you could change the color in your <code>main.css</code> like</p>
<pre><code>.myClassForMyPath {
    fill: yellow;
}
</code></pre>


blocks|key|35954|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|35955|如果在web浏览器中查看svg，则此方法将起作用，但一旦将此代码上载到服务器，并且svg图标的类被编码，就好像它是背景图像一样，颜色就会丢失，并恢复为默认颜色。颜色似乎不能从外部样式表中更改，即使颜色的svg类和svg的显示和位置的顶层类都映射到相同的目录。|35956|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]



<p></p>

<p>This method will work if the svg is viewed within a web browser but as soon as this code is uploaded to the sever and the class for the svg icon is coded as if it was a background image the color is lost and back to the default color. Seems like the color can not be changed from the external style sheet even though both the svg class for the color and the top layer class for the display and position of the svg are both mapped to the same directory.</p>


blocks|key|252481|text|@leo这里是angularJS版本，再次感谢|type|unstyled|depth|inlineStyleRanges|entityRanges|data|252482|G.directive+(+'imgInlineSvg',+function+()+{

return+{
++++restrict+:+'C',
++++scope+:+true,
++++link+:+function+(+scope,+elem,+attrs+)+{

++++++++if+(+attrs.src+)+{

++++++++++++$+(+attrs+).each+(+function+()+{
++++++++++++++++var+imgID++++=+attrs.class;
++++++++++++++++var+imgClass+=+attrs.class;
++++++++++++++++var+imgURL+++=+attrs.src;

++++++++++++++++$.get+(+imgURL,+function+(+data+)+{

++++++++++++++++++++var+$svg+=+$+(+data+).find+(+'svg'+);
++++++++++++++++++++if+(+typeof+imgID+!==+'undefined'+)+{
++++++++++++++++++++++++$svg+=+$svg.attr+(+'id',+imgID+);
++++++++++++++++++++}

++++++++++++++++++++if+(+typeof+imgClass+!==+'undefined'+)+{
++++++++++++++++++++++++$svg+=+$svg.attr+(+'class',+imgClass+%2B+'+replaced-svg'+);
++++++++++++++++++++}

++++++++++++++++++++$svg+=+$svg.removeAttr+(+'xmlns:a'+);

++++++++++++++++++++elem.replaceWith+(+$svg+);

++++++++++++++++}+);

++++++++++++}+);
++++++++}

++++}

}

}+);|code-block|syntax|javascript|252483|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>@leo here is the angularJS version, thanks again </p>

<pre><code>G.directive ( 'imgInlineSvg', function () {

return {
    restrict : 'C',
    scope : true,
    link : function ( scope, elem, attrs ) {

        if ( attrs.src ) {

            $ ( attrs ).each ( function () {
                var imgID    = attrs.class;
                var imgClass = attrs.class;
                var imgURL   = attrs.src;

                $.get ( imgURL, function ( data ) {

                    var $svg = $ ( data ).find ( 'svg' );
                    if ( typeof imgID !== 'undefined' ) {
                        $svg = $svg.attr ( 'id', imgID );
                    }

                    if ( typeof imgClass !== 'undefined' ) {
                        $svg = $svg.attr ( 'class', imgClass + ' replaced-svg' );
                    }

                    $svg = $svg.removeAttr ( 'xmlns:a' );

                    elem.replaceWith ( $svg );

                } );

            } );
        }

    }

}

} );
</code></pre>


blocks|key|36054|text|您可以使用以下命令在SVG文件中包含指向外部css文件的链接：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|36055|<link+xmlns="http://www.w3.org/1999/xhtml"+rel="stylesheet"+href="mystyles.css"+type="text/css"/>|code-block|syntax|javascript|36056|你需要把这个放在开始标签后面：|36057|<svg>
++<link+xmlns="http://www.w3.org/1999/xhtml"+rel="stylesheet"+href="mystyles.css"+type="text/css"/>
++<g>
++++<path+d=.../>
++</g>
</svg>|36058|这并不是一个完美解决方案，因为您必须修改svg文件，但只需修改一次，就可以在一个css文件中为所有svg文件完成所有样式更改。|36059|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>You can include in your SVG files link to external css file using:</p>

<pre><code>&lt;link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"/&gt;
</code></pre>

<p>You need to put this after  opening tag:</p>

<pre><code>&lt;svg&gt;
  &lt;link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"/&gt;
  &lt;g&gt;
    &lt;path d=.../&gt;
  &lt;/g&gt;
&lt;/svg&gt;
</code></pre>

<p>It's not perfect solution, because you have to modify svg files, but you modify them once and than all styling changes can be done in one css file for all svg files.</p>


blocks|key|252589|text|在我的例子中，我在外部类中应用了display:block。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|252590|需要在合适的地方进行实验。|252591|在内联svg中，添加类和样式甚至不会删除上面的空格。|252592|请参阅:应用display:block的位置|252593|<div+class="col-3+col-sm-3+col-md-2++front-tpcard"><a+class="noDecoration"+href="#">
<img+class="img-thumbnail+img-fluid"><svg+id="Layer_1"></svg>
<p+class="cardtxt">Text</p>
</a>
</div>|code-block|syntax|javascript|252594|应用的类|252595|+++.front-tpcard+.img-thumbnail{
++++++++display:+block;+/*To+hide+the+blank+whitespace+in+svg*/
++++}|252596|这对我很有效。内部svg类不起作用|252597|entityMap^0|G|D|0|0|3|3|0|6|D|0|0|0|0|9|3|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|L|3|M|5|N|7|18|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|19|8|@]|D|@]|E|$]]|$1|S|3|T|5|N|7|1A|8|@]|D|@]|E|$O|P]]|$1|U|3|V|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|X|$]]

<p>In my case, I have applied <code>display:block</code> in outer class.</p>
<p>Need to experiment, where it fits.</p>
<p>Inside inline <code>svg</code> adding class and style does not even remove the above white-space.</p>
<p>See: where the <code>display:block</code> gets applied.</p>
<pre><code>&lt;div class=&quot;col-3 col-sm-3 col-md-2  front-tpcard&quot;&gt;&lt;a class=&quot;noDecoration&quot; href=&quot;#&quot;&gt;
&lt;img class=&quot;img-thumbnail img-fluid&quot;&gt;&lt;svg id=&quot;Layer_1&quot;&gt;&lt;/svg&gt;
&lt;p class=&quot;cardtxt&quot;&gt;Text&lt;/p&gt;
&lt;/a&gt;
&lt;/div&gt;
</code></pre>
<p>The class applied</p>
<pre><code>   .front-tpcard .img-thumbnail{
        display: block; /*To hide the blank whitespace in svg*/
    }
</code></pre>
<p>This worked for me.
Inner <code>svg</code> class did not worked</p>


<p>I have several SVG graphics I'd like to modify the colors of via my external style sheets - not directly within each SVG file. I'm not putting the graphics in-line, but storing them in my images folder and pointing to them.</p>

<p>I have implemented them in this way to allow tooltips to work, and I also wrapped each in an <code>&lt;a&gt;</code> tag to allow a link.</p>

<pre><code>&lt;a href='http://youtube.com/...' target='_blank'&gt;&lt;img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /&gt;&lt;/a&gt;
</code></pre>

<p>And here is the code of the SVG graphic:</p>

<pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;?xml-stylesheet href="stylesheets/main.css" type="text/css"?&gt;
&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;

&lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69"&gt;
&lt;g&gt;
    &lt;path d="M28.44......./&gt;
&lt;/g&gt;
&lt;/svg&gt;
</code></pre>

<p>I put the following in my external CSS file (main.css):</p>

<pre><code>.socIcon g {fill:red;}
</code></pre>

<p>Yet it has no effect on the graphic. I also tried .socIcon g path {} and .socIcon path {}.</p>

<p>Something isn't right, perhaps my implementation doesn't allow external CSS modifications, or I missed a step? I'd really appreciate your help! I just need the ability to modify the colors of the SVG graphic via my external stylesheet, but I cannot lose the tooltip and link ability. (I may be able to live without tooltips though.) Thanks!</p>


How to style SVG with external CSS?

服务器

我有几个SVG图形，我想通过我的外部样式表修改其颜色-而不是直接在每个SVG文件中修改。我不是将图形放在行内，而是将它们存储在我的图像文件夹中并指向它们。我以这种方式实现了它们，以允许工具提示工作，并且我还将它们包装在一个<a>标记中以允许一个链接。<a href='http://youtube.com/...' ta...

问如何使用外部CSS设置SVG的样式？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用外部CSS设置SVG的样式？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用外部CSS设置SVG的样式？
EN