使用内联SVG与CSS /更少

我被困在一个问题上，可以通过复制大量的内容来解决，但我希望能够避免这个问题。使用内联SVG与CSS /更少

我正在使用产品数据库中的数组生成内容块，并且背景的颜色在此处。所以在这个例子中，我使用内联CSS来从中产生背景颜色。 HOwever每个内容块都要求SVG以适当的颜色进行协调。

我知道我可以使用fill:#fff改变这些SVGs的颜色，但我不能这样做一字排列的SVGs通过PHP的file_get_contents

其他的一切取回了可能只是做color:parent但是家长不在fill上工作。

将SVG颜色更改为其产品内容块的相应颜色的最佳方法是什么？

我正在使用.LESS也认为它可能会设置可用于内联的颜色，但我没有太多运气。

我想另一种方法是以某种方式在foreach中将类应用于SVG文件？

在foreach代码：

<? foreach($products as $product){?> 
       <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 col-xl-3 product-outer" style="background-color:<?=$product['product_main_bg_colour'].';';?>"> 
        <div> 
         <div class="product-box"> 
          <div class="product-image"><img src="/<?=$product['product_thumbnail_image'];?>" alt="<?=$product['product_name'];?>" /></div> 
          <div class="product-name"><?=$product['product_name'];?></div> 
         </div> 
         <div class="product-options" style="color:<?=$product['product_main_bg_colour'].';';?>"> 
          <div class="option-list"> 
           <div class="installation option-list-item"><?=file_get_contents(url()."/images/svgs/installation.svg");?>Installation help</div> 
           <div class="manual option-list-item"><?=file_get_contents(url()."/images/svgs/manual.svg");?>Download manual</div> 
           <div class="videos option-list-item"><?=file_get_contents(url()."/images/svgs/how-to.svg");?>How-to video</div> 
           <div class="troubleshoot option-list-item"><?=file_get_contents(url()."/images/svgs/troubleshoot.svg");?>Troubleshoot</div> 
           <div class="dimensions option-list-item"><?=file_get_contents(url()."/images/svgs/dimensions.svg");?>Dimensions</div> 
           <div class="more">View more</div> 
          </div> 
         </div> 
        </div> 
       </div> 
       <? }?>

来源

2015-03-31 Mr Sorbose

你有任何代码，你可以展示？ – 2015-03-31 13:50:22

向我们展示一些代码。 – 2015-03-31 13:53:06

我已经添加了由foreach生成的代码。 SVG需要在选项列表中改变颜色 – 2015-03-31 13:57:32

使用颜色：父母与补相结合：currentColor

来源

2015-03-31 14:01:22

使用内联SVG与CSS /更少

回答

相关问题