为相同的SVG< object>不同的方式 [英] Styling the same SVG <object> different ways

问题描述

我想在一个页面上有不同颜色的一系列相同的SVG文件。我知道，使SVG进入页面没有膨胀的代码，并仍然具有外部可定制的最好的方法是通过< object> 标签。 / p>

这里是我到目前为止：

HTML
$ b

 < object type =image / svg + xmldata =images / circle.svgclass =object-circle red> 
<！ -  CSS中的备用图片 - > 
< / object> 
 
< object type =image / svg + xmldata =images / circle.svgclass =object-circle blue> 
<！ -  CSS中的备用图片 - > 
< / object> 
  

CSS

  .object-circle {
 height：16px; 
 width：16px; 
} 
 
 .red .svg-circle {
 fill：＃f00; 
} 
 .blue .svg-circle {
 fill：＃00f; 
} 
  

SVG

 <？xml-stylesheet type =text / csshref =styles.css？> 
< svg xmlns =http://www.w3.org/2000/svgwidth =400height =400viewBox =0 0 400 400> 
< defs> 
< style> 
 .svg-circle {
 fill-rule：evenodd; 
} 
< / style> 
< / defs> 
< path class =svg-circled =M200,398.688A199.552,199。.../> 
< / svg> 
  

这只是不工作。我相信有一个问题，定位< object> 标签来操纵SVG的填充在CSS中的属性。 / p>

将 .red 选择器关闭样式表，并保留 .svg-circle selector in place按预期工作 - 将圆圈变成红色，但我想能够在页面上有不同颜色的几个。

帮助非常感谢！

如果我无法解决这个问题，我可能只是使用一个老式的.png精灵表。

解决方案

正如CBroe所说，它是一个外部对象样式的问题。你可以通过JS访问它并更改它，但我怀疑这是理想的，并有确保其加载第一等问题。

但是，我不相信这是必须是最好的方法，你说，除非有一些其他要求（例如没有javascript或libs，它必须是外部的，你仍然可以加载它通过快照加载方法，例如，如果你支持js）。

您可以简单地使用defs / use语句。我刚刚使用了一个圈子为了简洁，但你可以有一个更复杂的路径或其中的任何东西。

jsfiddle

 < svg xmlns =http ：//www.w3.org/2000/svgwidth =400height =400viewBox =0 0 400 400> 
< defs> 
< style> 
 .svg-circle {
 fill-rule：evenodd; 
 fill：'red'; 
} 
< / style> 
< circle id =myDefsCircleclass =svg-circler =20cx =100cy =100/> 
< / defs> 
 
< use x =10y =0xlink：href =＃myDefsCirclestyle =fill：red/& 
< use x =10y =50xlink：href =＃myDefsCirclestyle =fill：blue/> 
< use x =10y =100xlink：href =＃myDefsCirclestyle =fill：green/> 
< / svg> 
  

I want to have a series of the same SVG file on a page with different colours. I'm aware that the best method of getting the SVG into the page without bloating the code, and still have it externally stylable, is through the <object> tag.

Here's what I have so far:

HTML

<object type="image/svg+xml" data="images/circle.svg" class="object-circle red" >
    <!-- fallback image in CSS -->
</object>

<object type="image/svg+xml" data="images/circle.svg" class="object-circle blue" >
    <!-- fallback image in CSS -->
</object>

CSS

.object-circle {
    height:16px;
    width:16px;
}

.red .svg-circle {
    fill:#f00;
}
.blue .svg-circle {
    fill:#00f;
}

SVG

<?xml-stylesheet type="text/css" href="styles.css" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
  <defs>
    <style>
      .svg-circle {
        fill-rule: evenodd;
      }
    </style>
  </defs>
  <path class="svg-circle" d="M200,398.688A199.552,199. ..."/>
</svg>

This just doesn't work as is. I believe there's an issue with targeting the <object> tag to manipulate the SVG's fill property in the CSS.

Taking the .red selector off the style sheet and leaving the .svg-circle selector in place works as expected - turning the circle red, but I want to be able to have several on the page with different colours.

Any help much appreciated!

If I can't crack this I might just resort to an old-fashioned .png sprite sheet.

解决方案

As CBroe says, its an issue with styling an external object. You can access it via JS and change it, but I doubt thats ideal and there's issues of making sure its loaded first etc.

However, I'm not convinced this is necessarily the best method as you say, unless there are some other requirements (eg no javascript, or libs and it must be external, you can still load it via Snap load method for example then though if you support js).

You can simply use a defs/use statement. I've just used a circle for brevity, but you could have a more complex path or whatever in there.

jsfiddle

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
  <defs>
    <style>
      .svg-circle {
        fill-rule: evenodd;
        fill: 'red';
      }
    </style>
    <circle id="myDefsCircle" class="svg-circle" r="20" cx="100" cy="100"/>
  </defs>

   <use x="10" y="0"   xlink:href="#myDefsCircle" style="fill:red"/>
   <use x="10" y="50"  xlink:href="#myDefsCircle" style="fill:blue"/>
   <use x="10" y="100" xlink:href="#myDefsCircle" style="fill:green"/>
</svg>

这篇关于为相同的SVG< object>不同的方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！