SVG requiredFeatures 属性说明

requiredFeatures 属性是 SVG 中用来明确告诉浏览器,要渲染该元素,必须支持的功能;

requiredFeatures 的属性值可以是由空格分隔的多个 feature string. 如果浏览器全部支持 requiredFeatures 所列出来的功能,那么属性的结果为 true. 元素就能被浏览器正确的渲染,否则浏览器将忽略这个元素。

如果没有显示的指定 requiredFeatures 属性,则值为 true, 如果指定了 requiredFeatures 属性,但是值为 "" ,则值为 false.

requiredFeatures 属性通常和 switch 元素一起使用,使浏览器在不支持 SVG 的某些元素时还有能一个比较好的回退方案。

示例如下:

浏览器要渲染 foreignObject 元素及其子元素,则浏览器必须支持 http://www.w3.org/TR/SVG11/feature#Extensibility 功能,否则显示一行文案 "您的浏览器暂不支持 foreignObject 元素"。

 <switch>
   <foreignObject x="100px" y="50px" width="100%" height="80px" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
     <body>
        ...
     </body>
   </foreignObject>
   <text x="100px" y="75px">您的浏览器暂不支持 foreignObject 元素</text>
 </switch>

switch 元素回告诉浏览器,如果元素的 requiredFeatures 属性值为 true 时才会渲染第一个直接子元素,否则忽略渲染之后的元素。

Reference

results matching ""

    No results matching ""