css - 将内联 SVG 与 CSS/Less 结合使用

Question

我遇到了一个可以通过复制大量内容来解决的问题，但我希望避免这种情况。

我正在使用产品数据库中的数组来生成内容 block ，背景颜色在这里。所以在这个例子中，我使用内联 CSS 来生成背景颜色。但是每个内容 block 都需要适当颜色协调的 SVG。

我知道我可以使用 fill:#fff 来更改这些 SVG 的颜色，但是我不能这样做，因为 SVG 是通过 php 的 file_get_contents 检索的

我可以做的其他所有事情 color:parent 但是 parent 对 fill 不起作用。

将 SVG 颜色更改为其产品内容 block 的适当颜色的最佳方法是什么？

我也在使用 .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>
                <? }?>

Answer 1

结合使用 color:parent 和 fill:currentColor