Question

我正在尝试将svg作为背景，然后用一种不起作用的颜色填充它。

#header-container { background-color:transparent; background-image: url(http://somewebsite.com/images/wallp.svg); fill: red; }

这似乎不起作用...... 有什么建议吗？

Answer 1

工作示例http://jsfiddle.net/InferOn/p5Az4/3/

<强> HTML

<svg id="header-container" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" i:viewOrigin="226.9077 360.5469" i:rulerOrigin="0.5 -0.5" i:pageBounds="-0.5 612.5 791.5 0.5" width="303.044" height="72.375" viewBox="0 0 303.044 72.375" overflow="visible" enable-background="new 0 0 303.044 72.375" xml:space="preserve">
  <!-- too markup to past here -->
</svg>

<强> CSS

#header-container {fill: red;}

没有你风格的图片结果

enter image description here

你的例子，我很抱歉，无法工作，因为 fill property

设置或检索指示要绘制颜色的值给定图形元素的内部。

您可以根据SPEC

将它们应用于形状和文本内容元素

shape 的位置是：

由直线的某种组合定义的图形元素线条和曲线。具体来说：'path'，'rect'，'circle'，'ellipse'， 'line'，'polyline'和'polygon'。

和 text content element 是：

文本内容元素是导致文本字符串的SVG元素被渲染到画布上。 SVG 1.1文本内容元素是以下：'altGlyph'，'textPath'，'text'，'tref'和'tspan'

所以

'fill'属性绘制给定图形的内部   元件。要绘制的区域包括内部的任何区域   形状的轮廓。全部确定形状的内部   考虑子路径，并根据内部确定   与“填充规则”的当前值相关联的规则   属性。形状的零宽度几何轮廓包括在中   要涂的区域。

填充操作通过执行填充来填充打开的子路径   操作好像添加了一个额外的“closepath”命令   将子路径的最后一个点与第一个点连接起来的路径   子路径。因此，填充操作适用于其中的两个开放子路径   'path'元素（即没有closepath命令的子路径）和   '折线'元素。

在背景下填充SVG颜色

1 个答案: