首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用外部CSS设置SVG的样式?

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

Stack Overflow用户
提问于 2013-08-26 05:50:26
回答 13查看 136.7K关注 0票数 123

我有几个SVG图形,我想通过我的外部样式表修改其颜色-而不是直接在每个SVG文件中修改。我不是将图形放在行内,而是将它们存储在我的图像文件夹中并指向它们。

我以这种方式实现了它们,以允许工具提示工作,并且我还将它们包装在一个<a>标记中以允许一个链接。

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

下面是SVG图形的代码:

<?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 d="M28.44......./>
</g>
</svg>

我在外部CSS文件(main.css)中放入了以下内容:

.socIcon g {fill:red;}

然而,它对图形没有影响。我还尝试了.socIcon g路径{}和.socIcon路径{}。

有些地方不对劲,也许我的实现不允许外部CSS修改,或者我错过了一个步骤?我真的很感谢你的帮助!我只需要能够通过我的外部样式表修改SVG图形的颜色,但我不能失去工具提示和链接功能。(不过,我可能没有工具提示也能活下去。)谢谢!

EN

回答 13

Stack Overflow用户

回答已采纳

发布于 2013-12-22 00:12:07

只有当main.css文件内联包含在HTML中时,它才会对SVG的内容产生影响:

https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction

<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>

如果希望将SVG保存在文件中,则需要在SVG文件中定义CSS。

您可以使用样式标记来完成此操作:

http://www.w3.org/TR/SVG/styling.html#StyleElementExample

<!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>

您可以使用服务器端的工具来更新样式标记,具体取决于活动样式。在ruby中,你可以使用Nokogiri来实现这一点。SVG就是XML。因此,可能有许多可用的XML库可以实现这一点。

如果您不能做到这一点,您将不得不像使用PNG一样使用它们;为每个样式创建一个集合,并以内联方式保存它们的样式。

票数 105
EN

Stack Overflow用户

发布于 2014-10-14 04:18:17

您可以做您想做的事情,但有一个(重要的)警告:您的符号中的路径不能通过外部CSS独立地设置样式--您只能使用此方法设置整个符号的属性。因此,如果您的符号中有两个路径,并希望它们具有不同的填充颜色,这将不起作用,但如果您希望所有路径都是相同的,则此方法应该有效。

在您的html文件中,您需要如下内容:

<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>

在外部SVG文件中,您需要如下内容:

<svg xmlns="http://www.w3.org/2000/svg">
   <symbol id="example" viewBox="0 0 256 256">
    <path d="M120.... />
  </symbol>
</svg>

svg标记(在html中)上的类从fill-red交换为fill-blue和ta-da……你用蓝色而不是红色。

通过将外部CSS与特定路径上的一些内联CSS混合和匹配,您可以部分地绕过能够使用外部CSS单独定位路径的限制,因为内联CSS将优先。如果你想通过外部CSS改变背景的颜色,但图标本身始终是白色的(反之亦然),那么这种方法将会起作用。因此,使用与前面相同的HTML和类似于下面的svg代码,您将得到一个红色背景和一个白色前景路径:

<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>
票数 57
EN

Stack Overflow用户

发布于 2019-12-29 05:25:58

您可以使用以下命令在SVG文件中包含指向外部css文件的链接:

<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"/>

你需要把这个放在开始标签后面:

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

这并不是一个完美解决方案,因为您必须修改svg文件,但只需修改一次,就可以在一个css文件中为所有svg文件完成所有样式更改。

票数 28
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18434094

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档