-moz-context-properties

非标准

此功能是非标准的，不处于标准轨道上.。不要在面向Web的生产站点上使用它：它并不适用于每个用户。实现之间也可能存在很大的不兼容性，而且这种行为在未来可能会发生变化。

注：此功能可从Firefox 55中获得，但目前仅支持通过以下方式加载的SVG图像：chrome://或resource://URL。要在Web上实验SVG中的特性，必须设置svg.context-properties.content.enabled为true。

如果您在网页中引用SVG图像（例如<img>元素或背景图像），则SVG图像可以与嵌入元素（其上下文）进行协调，以使图像采用嵌入元素上设置的属性值。要执行此操作，嵌入元素需要列出要为图像提供的属性，方法是将其列为-moz-context-properties属性的值，并且图像需要使用值（如context-fill值）来选择使用这些属性。

语法

/* Keyword values */
-moz-context-properties: fill;
-moz-context-properties: fill, stroke;

/* Global values */
-moz-context-properties: inherit;
-moz-context-properties: initial; 
-moz-context-properties: unset;

值

fill将fill图像上stoke设置的值展现给嵌入的SVG.stroke展示图像上设置的值到嵌入的SVG.fill-opacity，以展现fill-opacity图像上设置的值到嵌入的SVG.stroke-opacity展示stoke-opacity图像上设置的值到嵌入SVG。

正式语法

none | [ fill | fill-opacity | stroke | stroke-opacity ]#

示例

在本例中，我们有一个简单的，使用<img>元素的SVG。

您首先需要在嵌入元素上指定您希望向嵌入式SVG公开的值的-moz-context-properties属性，使用属性。例如：

.img1 {
  width: 100px;
  height: 100px;
  -moz-context-properties: fill, stroke;
  fill: lime;
  stroke: purple;
}

现在你已经完成了这个工作，SVG图像可以使用fill和stroke属性的值，例如：

<img class="img1" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>
                       <rect width='100%' height='100%' stroke-width='30px'
                       fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>">

这里我们将图像设置为src包含简单SVG图像的数据URI; 的<rect>内部是为了利用其fill与stroke从所述值fill和stroke所述上设置<img>元件通过给他们的context-fill/ context-stroke关键字它们的值，用备用颜色，这将在的情况下使用的填充（红色）沿着该SVG是加载独立于顶层窗口（其中没有上下文元素来提供上下文值）。请注意，如果直接在SVG上设置颜色，但是同时指定了上下文颜色，则上下文颜色将覆盖该颜色。

注：：你可以找到一个关于Gizub的工作实例...

初始值	none
适用元素	Any element that can have an image applied to it, for example as a background-image, border-image, or list-style-image.
是否是继承属性	yes
适用媒体	visual
计算值	as specified
Animation type	discrete
正规顺序	the unique non-ambiguous order defined by the formal grammar

规范

此属性在任何CSS标准中都未定义。

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	?	55 (55)1	No support	?	?

Feature	Android	Android Webview	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	No support	?	55.0 (55)1	No support	?	?	?

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18