Question

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

我使用产品数据库中的数组生成内容块，背景颜色在这里。所以在这个例子中我使用内联CSS从中生成背景颜色。每个内容块都要求SVG采用适当的颜色协调。

我意识到我可以使用fill:#fff来改变这些SVG的颜色，但我无法通过php file_get_contents

检索SVG。

我可以做的其他事情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>
                <? }?>

Answer 1

使用color：parent与fill：currentColor

结合使用

使用带有CSS / Less的内联SVG

1 个答案: