SVG网址的currentColor继承

问题描述

与相同的问题>我如何让SVG图像从HTML文档继承颜色?，特别是当应用于SVG图像作为:before伪元素上的内容时.

Same question as How do I have an SVG image inherit colors from the HTML document?, but specifically when applied to an svg image used as content on a :before pseudo-element.

(期望的行为是两个复选标记都从主体继承了红色.目前只有嵌入式SVG可以这样做.)

(Desired behavior is that both checkmarks inherit the red color from the body. Currently only the inline SVG does.)

<style type='text/css'>
    body {
        color: red;
    }

    .checkmark {
        height: 2em;
        width: 2em;
    }

    .checkmark:before {
        content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='-0.5 0 20 15'><rect fill='currentColor' stroke='none' transform='rotate(45 4.0033 8.87436)' height='5' width='6.32304' y='6.37436' x='0.84178'></rect><rect fill='currentColor' stroke='none' transform='rotate(45 11.1776 7.7066)' width='5' height='16.79756' y='-0.69218' x='8.67764'></rect></svg>");
    }
</style>

<!-- Renders red -->
<svg xmlns='http://www.w3.org/2000/svg' width='2em' height='2em' viewBox='-0.5 0 20 15'><rect fill='currentColor' stroke='none' transform='rotate(45 4.0033 8.87436)' height='5' width='6.32304' y='6.37436' x='0.84178'></rect><rect fill='currentColor' stroke='none' transform='rotate(45 11.1776 7.7066)' width='5' height='16.79756' y='-0.69218' x='8.67764'></rect></svg>

<!-- Renders #000 -->
<div class="checkmark"></div>

jsFiddle演示

推荐答案

content: url(...)使url部分成为图像，换句话说svg成为其自己的独立文档.样式不适用于所有文档，因此在这种情况下，无法获得color来影响svg.

content: url(...) makes the url part into an image, in other words the svg becomes its own separate document. Styles don't apply across documents, so it's not possible to get color to affect the svg in this scenario.

当svg内联时，它是文档的OTOH一部分，因此可以对其应用样式.

When the svg is inline it is OTOH part of the document, so styles can be applied to it.

您可以制作(或动态生成)复选标记svg的多个版本并调整样式规则，以便选择适当的预着色"样式.

You could make (or dynamically generate) multiple versions of the checkmark svg and tune the stylerules such that the appropriate "pre-colored" one is selected.

这篇关于SVG网址的currentColor继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！