就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. CSS
  3. -moz-context-properties

在此页

非标
此特征是非标准的，且不在标准轨道中。不要在面向 Web 的生产站点中使用它：它不适用于每个用户。实现之间可能存在大的不兼容性，且行为将来可能改变。

-moz-context-properties property can be used within privileged contexts in Firefox to share the values of specified properties of the element with a child SVG image.

If you reference an SVG image in a webpage (such as with the <img> element or as a background image), the SVG image can coordinate with the embedding element (its context) to have the image adopt property values set on the embedding element. To do this the embedding element needs to list the properties that are to be made available to the image by listing them as values of the -moz-context-properties property, and the image needs to opt in to using those properties by using values such as the 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
Expose the fill value set on the image to the embedded SVG.
stroke
Expose the stroke value set on the image to the embedded SVG.
fill-opacity
Expose the fill-opacity value set on the image to the embedded SVG.
stroke-opacity
Expose the stoke-opacity value set on the image to the embedded SVG.

形式定义

初始值 none
适用于 Any element that can have an image applied to it, for example as a background-image , border-image ，或 list-style-image .
继承 yes
计算值 如指定
动画类型 discrete

形式句法 

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

范例

Exposing fill and stroke to an SVG image

In this example we have a simple SVG embedded using an <img> 元素。

You first need to specify on the embedding element the properties whose values you wish to expose to the embedded SVG, using the -moz-context-properties property. For example: 

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

Now that you've done this, the SVG image can use the values of the fill and stroke properties, for example: 

<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>">

Here we've set the image src to a data URI containing a simple SVG image; the <rect> inside has been made to take its fill and stroke values from the fill and stroke set on the <img> element by giving them the context-fill / context-stroke keywords in their values, along with a fallback color for the fill (red) which will be used in the case that the SVG is loaded standalone in a top-level window (where it will have no context element to provide context values). Note that if a color is set directly on the SVG, but then the context color is also specified, the context color overrides the direct color.

注意 : You can find a working example on Github .

规范

Not part of any standard.

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
-moz-context-properties Experimental 非标 Chrome 不支持 No Edge 不支持 No Firefox 完整支持 55 注意事项 Disabled
完整支持 55 注意事项 Disabled
注意事项 With the preference set to false , the property still works with SVGs via chrome:// or resource:// URL
Disabled ). To change preferences in Firefox, visit about:config.
IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 完整支持 55 注意事项 Disabled
完整支持 55 注意事项 Disabled
注意事项 With the preference set to false , the property still works with SVGs via chrome:// or resource:// URL
Disabled ). To change preferences in Firefox, visit about:config.
Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No

图例

完整支持

完整支持

不支持

不支持

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

非标。预期跨浏览器支持较差。

非标。预期跨浏览器支持较差。

见实现注意事项。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

另请参阅

元数据

  • 最后修改：
  1. CSS
  2. CSS 参考
  3. Mozilla Extensions
  4. 特性
    1. -moz-context-properties
    2. -moz-float-edge
    3. -moz-force-broken-image-icon
    4. -moz-image-region
    5. -moz-orient
    6. -moz-outline-radius
    7. -moz-outline-radius-bottomleft
    8. -moz-outline-radius-bottomright
    9. -moz-outline-radius-topleft
    10. -moz-outline-radius-topright
    11. -moz-user-focus
    12. -moz-user-input
    13. box-align
    14. box-direction
    15. box-flex
    16. box-flex-group
    17. box-lines
    18. box-ordinal-group
    19. box-orient
    20. box-pack