首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

requiredfeatures

该属性采用特征字符串列表,各个字符串之间用空格分隔。它决定了浏览器是否支持所有命名功能。如果所有这些都受支持,则该属性评估为true结束呈现的元素;否则,该属性的计算结果为false,并且当前元素及其子元素被跳过,因此不会被渲染。这提供了一种设计SVG的方法,当功能不可用时,SVG会优雅地退后。

如果该属性不存在,则其隐式评估值为true。如果给属性赋予一个空字符串或空字符串值requiredFeatures,则该属性评估为false

requiredFeatures通常与<switch>元素一起使用。如果requiredFeatures在其他情况下使用,则表示在给定元素上是否显示元素的简单开关。

如果您需要通过脚本检测SVG功能的可用性,则可以使用该DOMImplementation.hasFeature()方法。

Usage语境

分类

条件处理属性

<列表的的特性>

动画

没有

规范性文件

SVG 1.1(第2版)

<list-of-feature>这是使用空格分隔的特征字符串列表。确定浏览器是否支持所有命名功能。请参阅下面的特征字符串以获取允许的值列表。

特征字符串

以下是requiredFeatures属性的特征字符串。这些相同的特征字符串适用于hasFeature方法调用,它是SVG DOM对DOMImplementation接口的支持的一部分。在某些情况下,特征字符串直接映射到一组属性,属性或元素,而在其他情况下,它们代表浏览器的某些功能。请注意,功能字符串的格式和命名已从SVG 1.0更改为SVG 1.1。这里没有列出SVG 1.0特征字符串,但可以在SVG规范中找到。出于兼容性原因,某些浏览器支持SVG 1.0功能字符串。但是,SVG 1.0功能字符串已被视为弃用。

至少支持以下功能之一:

至少支持以下功能之一:

浏览器支持以下所有功能:

浏览器支持所有与http://www.w3.org/TR/SVG11/feature#SVG-static语言功能对应的DOM接口和方法。

浏览器支持所有与http://www.w3.org/TR/SVG11/feature#SVG-animation的语言功能相对应的DOM接口和方法

浏览器支持http://www.w3.org/TR/SVG11/feature#SVG-animation提供的所有语言功能以及以下功能:

浏览器支持所有与http://www.w3.org/TR/SVG11/feature#SVG-dynamic的语言功能对应的DOM接口和方法。

浏览器支持idxml:basexml:langxml:space属性

浏览器支持<svg><g><defs><desc><title><metadata><symbol><use>元素。

浏览器支持<svg><g><defs><desc><title><metadata><use>元素。

浏览器支持该enable-background属性

浏览器支持的<switch>元件,以及requiredFeaturesrequiredExtensionssystemLanguage属性

浏览器支持<image>元素。

浏览器支持<style>元素。

浏览器支持clipoverflow属性。

浏览器支持<rect><circle><line><polyline><polygon><ellipse><path>元素。

浏览器支持<text><tspan><tref><textpath><altglyph><altglyphdef><altglyphitem><glyphref>元素。

浏览器支持该<text>元素

浏览器支持colorfillfill-rulestrokestroke-dasharraystroke-dashoffsetstroke-linecapstroke-linejoinstroke-miterlimitstroke-widthcolor-interpolationcolor-rendering属性

浏览器支持colorfillfill-rulestrokestroke-dasharraystroke-dashoffsetstroke-linecapstroke-linejoinstroke-miterlimitstroke-widthcolor-rendering属性

浏览器支持opacitystroke-opacityfill-opacity属性

浏览器支持displayimage-renderingpointer-eventsshape-renderingtext-renderingvisibility属性

浏览器支持displayvisibility属性

浏览器支持<marker>元素

浏览器支持<color-profile>元素

浏览器支持的<lineargradient><radialgradient>以及<stop>元件

浏览器支持<pattern>元素

浏览器支持的<clippath>元件和clip-pathclip-rule属性

浏览器支持<clippath>元素和clip-path属性

浏览器支持<mask>元素

浏览器支持的<filter><feblend><fecolormatrix><fecomponenttransfer><fecomposite><feconvolvematrix><fediffuselighting><fedisplacementmap><feflood><fegaussianblur><feimage><femerge><femergenode><femorphology><feoffset><fespecularlighting><fetile><fedistantlight><fepointlight><fespotlight><fefuncr><fefuncg><fefuncb><fefunca>元素

浏览器支持的<filter><feblend><fecolormatrix><fecomponenttransfer><fecomposite><feflood><fegaussianblur><feimage><femerge><femergenode><feoffset><fetile><fefuncr><fefuncg><fefuncb><fefunca>元素

浏览器支持onunloadonabortonerroronresizeonscrollonzoom属性

浏览器支持onbeginonendonrepeatonload属性

浏览器支持<cursor>元素

浏览器支持<a>元素

浏览器支持xlink:typexlink:hrefxlink:rolexlink:arcrolexlink:titlexlink:showxlink:actuate属性

浏览器支持externalResourcesRequired属性

浏览器支持<view>元素

浏览器支持<script>元素

浏览器支持的<animate><set><animatemotion><animatetransform><animatecolor><mpath>元素

浏览器支持的<font><font-face><glyph><missing-glyph><hkern><vkern><font-face-src><font-face-uri><font-face-format><font-face-name>元素

浏览器支持的<font><font-face><glyph><missing-glyph><hkern><font-face-src><font-face-name>元素

浏览器支持<foreignobject>元素

示例

Source code

Output result

<?xml version="1.0"?> <svg width="450" height="1170" viewPort="0 0 450 1170" version="1.1" xmlns="http://www.w3.org/2000/svg"> <style><![CDATA[ .ko{ fill: #900; } .ok{ fill: #060; } rect{ stroke:#000; stroke-width: 2px; } text{ fill:#FFF; font: 12px sans-serif; } ]]></style> <!-- Testing : http://www.w3.org/TR/SVG11/feature#SVG --> <rect class="ko" x="10" y="10" height="25" width="430" /> <rect class="ok" x="10" y="10" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#SVG" /> <text x="20" y="27">http://www.w3.org/TR/SVG11/feature#SVG</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#SVGDOM --> <rect class="ko" x="10" y="35" height="25" width="430" /> <rect class="ok" x="10" y="35" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#SVGDOM" /> <text x="20" y="52">http://www.w3.org/TR/SVG11/feature#SVGDOM</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#SVG-static --> <rect class="ko" x="10" y="60" height="25" width="430" /> <rect class="ok" x="10" y="60" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#SVG-static" /> <text x="20" y="77">http://www.w3.org/TR/SVG11/feature#SVG-static</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#SVGDOM-static --> <rect class="ko" x="10" y="85" height="25" width="430" /> <rect class="ok" x="10" y="85" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#SVGDOM-static" /> <text x="20" y="102">http://www.w3.org/TR/SVG11/feature#SVGDOM-static</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#SVG-animation --> <rect class="ko" x="10" y="110" height="25" width="430" /> <rect class="ok" x="10" y="110" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#SVG-animation" /> <text x="20" y="127">http://www.w3.org/TR/SVG11/feature#SVG-animation</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#SVGDOM-animation --> <rect class="ko" x="10" y="135" height="25" width="430" /> <rect class="ok" x="10" y="135" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#SVGDOM-animation" /> <text x="20" y="152">http://www.w3.org/TR/SVG11/feature#SVGDOM-animation</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#SVG-dynamic --> <rect class="ko" x="10" y="160" height="25" width="430" /> <rect class="ok" x="10" y="160" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#SVG-dynamic" /> <text x="20" y="177">http://www.w3.org/TR/SVG11/feature#SVG-dynamic</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#SVGDOM-dynamic --> <rect class="ko" x="10" y="185" height="25" width="430" /> <rect class="ok" x="10" y="185" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#SVGDOM-dynamic" /> <text x="20" y="202">http://www.w3.org/TR/SVG11/feature#SVGDOM-dynamic</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#CoreAttribute --> <rect class="ko" x="10" y="210" height="25" width="430" /> <rect class="ok" x="10" y="210" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#CoreAttribute" /> <text x="20" y="227">http://www.w3.org/TR/SVG11/feature#CoreAttribute</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#Structure --> <rect class="ko" x="10" y="235" height="25" width="430" /> <rect class="ok" x="10" y="235" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Structure" /> <text x="20" y="252">http://www.w3.org/TR/SVG11/feature#Structure</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#BasicStructure --> <rect class="ko" x="10" y="260" height="25" width="430" /> <rect class="ok" x="10" y="260" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#BasicStructure" /> <text x="20" y="277">http://www.w3.org/TR/SVG11/feature#BasicStructure</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#ContainerAttribute --> <rect class="ko" x="10" y="285" height="25" width="430" /> <rect class="ok" x="10" y="285" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#ContainerAttribute" /> <text x="20" y="302">http://www.w3.org/TR/SVG11/feature#ContainerAttribute</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#ConditionalProcessing --> <rect class="ko" x="10" y="310" height="25" width="430" /> <rect class="ok" x="10" y="310" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#ConditionalProcessing" /> <text x="20" y="327">http://www.w3.org/TR/SVG11/feature#ConditionalProcessing</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#Image --> <rect class="ko" x="10" y="335" height="25" width="430" /> <rect class="ok" x="10" y="335" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Image" /> <text x="20" y="352">http://www.w3.org/TR/SVG11/feature#Image</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#Style --> <rect class="ko" x="10" y="360" height="25" width="430" /> <rect class="ok" x="10" y="360" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Style" /> <text x="20" y="377">http://www.w3.org/TR/SVG11/feature#Style</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#ViewportAttribute --> <rect class="ko" x="10" y="385" height="25" width="430" /> <rect class="ok" x="10" y="385" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#ViewportAttribute" /> <text x="20" y="402">http://www.w3.org/TR/SVG11/feature#ViewportAttribute</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#Shape --> <rect class="ko" x="10" y="410" height="25" width="430" /> <rect class="ok" x="10" y="410" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Shape" /> <text x="20" y="427">http://www.w3.org/TR/SVG11/feature#Shape</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#Text --> <rect class="ko" x="10" y="435" height="25" width="430" /> <rect class="ok" x="10" y="435" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Text" /> <text x="20" y="452">http://www.w3.org/TR/SVG11/feature#Text</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#BasicText --> <rect class="ko" x="10" y="460" height="25" width="430" /> <rect class="ok" x="10" y="460" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#BasicText" /> <text x="20" y="477">http://www.w3.org/TR/SVG11/feature#BasicText</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#PaintAttribute --> <rect class="ko" x="10" y="485" height="25" width="430" /> <rect class="ok" x="10" y="485" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#PaintAttribute" /> <text x="20" y="502">http://www.w3.org/TR/SVG11/feature#PaintAttribute</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#BasicPaintAttribute --> <rect class="ko" x="10" y="510" height="25" width="430" /> <rect class="ok" x="10" y="510" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#BasicPaintAttribute" /> <text x="20" y="527">http://www.w3.org/TR/SVG11/feature#BasicPaintAttribute</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#OpacityAttribute --> <rect class="ko" x="10" y="535" height="25" width="430" /> <rect class="ok" x="10" y="535" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#OpacityAttribute" /> <text x="20" y="552">http://www.w3.org/TR/SVG11/feature#OpacityAttribute</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#GraphicsAttribute --> <rect class="ko" x="10" y="560" height="25" width="430" /> <rect class="ok" x="10" y="560" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#GraphicsAttribute" /> <text x="20" y="577">http://www.w3.org/TR/SVG11/feature#GraphicsAttribute</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#BasicGraphicsAttribute --> <rect class="ko" x="10" y="585" height="25" width="430" /> <rect class="ok" x="10" y="585" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#BasicGraphicsAttribute" /> <text x="20" y="602">http://www.w3.org/TR/SVG11/feature#BasicGraphicsAttribute</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#Marker --> <rect class="ko" x="10" y="610" height="25" width="430" /> <rect class="ok" x="10" y="610" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Marker" /> <text x="20" y="627">http://www.w3.org/TR/SVG11/feature#Marker</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#ColorProfile --> <rect class="ko" x="10" y="635" height="25" width="430" /> <rect class="ok" x="10" y="635" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#ColorProfile" /> <text x="20" y="652">http://www.w3.org/TR/SVG11/feature#ColorProfile</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#Gradient --> <rect class="ko" x="10" y="660" height="25" width="430" /> <rect class="ok" x="10" y="660" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Gradient" /> <text x="20" y="677">http://www.w3.org/TR/SVG11/feature#Gradient</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#Pattern --> <rect class="ko" x="10" y="685" height="25" width="430" /> <rect class="ok" x="10" y="685" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Pattern" /> <text x="20" y="702">http://www.w3.org/TR/SVG11/feature#Pattern</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#Clip --> <rect class="ko" x="10" y="710" height="25" width="430" /> <rect class="ok" x="10" y="710" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Clip" /> <text x="20" y="727">http://www.w3.org/TR/SVG11/feature#Clip</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#BasicClip --> <rect class="ko" x="10" y="735" height="25" width="430" /> <rect class="ok" x="10" y="735" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#BasicClip" /> <text x="20" y="752">http://www.w3.org/TR/SVG11/feature#BasicClip</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#Mask --> <rect class="ko" x="10" y="760" height="25" width="430" /> <rect class="ok" x="10" y="760" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Mask" /> <text x="20" y="777">http://www.w3.org/TR/SVG11/feature#Mask</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#Filter --> <rect class="ko" x="10" y="785" height="25" width="430" /> <rect class="ok" x="10" y="785" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Filter" /> <text x="20" y="802">http://www.w3.org/TR/SVG11/feature#Filter</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#BasicFilter --> <rect class="ko" x="10" y="810" height="25" width="430" /> <rect class="ok" x="10" y="810" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#BasicFilter" /> <text x="20" y="827">http://www.w3.org/TR/SVG11/feature#BasicFilter</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#DocumentEventsAttribute --> <rect class="ko" x="10" y="835" height="25" width="430" /> <rect class="ok" x="10" y="835" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#DocumentEventsAttribute" /> <text x="20" y="852">http://www.w3.org/TR/SVG11/feature#DocumentEventsAttribute</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#GraphicalEventsAttribute --> <rect class="ko" x="10" y="860" height="25" width="430" /> <rect class="ok" x="10" y="860" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#GraphicalEventsAttribute" /> <text x="20" y="877">http://www.w3.org/TR/SVG11/feature#GraphicalEventsAttribute</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#AnimationEventsAttribute --> <rect class="ko" x="10" y="885" height="25" width="430" /> <rect class="ok" x="10" y="885" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#AnimationEventsAttribute" /> <text x="20" y="902">http://www.w3.org/TR/SVG11/feature#AnimationEventsAttribute</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#Cursor --> <rect class="ko" x="10" y="910" height="25" width="430" /> <rect class="ok" x="10" y="910" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Cursor" /> <text x="20" y="927">http://www.w3.org/TR/SVG11/feature#Cursor</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#Hyperlinking --> <rect class="ko" x="10" y="935" height="25" width="430" /> <rect class="ok" x="10" y="935" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Hyperlinking" /> <text x="20" y="952">http://www.w3.org/TR/SVG11/feature#Hyperlinking</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#XlinkAttribute --> <rect class="ko" x="10" y="960" height="25" width="430" /> <rect class="ok" x="10" y="960" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#XlinkAttribute" /> <text x="20" y="977">http://www.w3.org/TR/SVG11/feature#XlinkAttribute</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#ExternalResourcesRequired --> <rect class="ko" x="10" y="985" height="25" width="430" /> <rect class="ok" x="10" y="985" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#ExternalResourcesRequired" /> <text x="20" y="1002">http://www.w3.org/TR/SVG11/feature#ExternalResourcesRequired</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#View --> <rect class="ko" x="10" y="1010" height="25" width="430" /> <rect class="ok" x="10" y="1010" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#View" /> <text x="20" y="1027">http://www.w3.org/TR/SVG11/feature#View</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#Script --> <rect class="ko" x="10" y="1035" height="25" width="430" /> <rect class="ok" x="10" y="1035" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Script" /> <text x="20" y="1052">http://www.w3.org/TR/SVG11/feature#Script</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#Animation --> <rect class="ko" x="10" y="1060" height="25" width="430" /> <rect class="ok" x="10" y="1060" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Animation" /> <text x="20" y="1077">http://www.w3.org/TR/SVG11/feature#Animation</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#Font --> <rect class="ko" x="10" y="1085" height="25" width="430" /> <rect class="ok" x="10" y="1085" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Font" /> <text x="20" y="1102">http://www.w3.org/TR/SVG11/feature#Font</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#BasicFont --> <rect class="ko" x="10" y="1110" height="25" width="430" /> <rect class="ok" x="10" y="1110" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#BasicFont" /> <text x="20" y="1127">http://www.w3.org/TR/SVG11/feature#BasicFont</text> <!-- Testing : http://www.w3.org/TR/SVG11/feature#Extensibility --> <rect class="ko" x="10" y="1135" height="25" width="430" /> <rect class="ok" x="10" y="1135" height="25" width="430" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" /> <text x="20" y="1152">http://www.w3.org/TR/SVG11/feature#Extensibility</text> </svg>

?

要素

以下元素可以使用requiredFeatures属性

  • Animation elements ?
  • Graphics elements ?
  • Text content child elements ?
  • <a>
  • <clippath>
  • <cursor>
  • <defs>
  • <foreignobject>
  • <g>
  • <mask>
  • <pattern>
  • <svg>
  • <switch>

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com