文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

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接口和方法。

浏览器支持id，xml:base，xml:lang和xml:space属性

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

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

浏览器支持该enable-background属性

浏览器支持的<switch>元件，以及requiredFeatures，requiredExtensions，systemLanguage属性

浏览器支持<image>元素。

浏览器支持<style>元素。

浏览器支持clip和overflow属性。

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

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

浏览器支持该<text>元素

浏览器支持color，fill，fill-rule，stroke，stroke-dasharray，stroke-dashoffset，stroke-linecap，stroke-linejoin，stroke-miterlimit，stroke-width，color-interpolation和color-rendering属性

浏览器支持color，fill，fill-rule，stroke，stroke-dasharray，stroke-dashoffset，stroke-linecap，stroke-linejoin，stroke-miterlimit，stroke-width和color-rendering属性

浏览器支持opacity，stroke-opacity和fill-opacity属性

浏览器支持display，image-rendering，pointer-events，shape-rendering，text-rendering和visibility属性

浏览器支持display和visibility属性

浏览器支持<marker>元素

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

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

浏览器支持<pattern>元素

浏览器支持的<clippath>元件和clip-path，clip-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>元素

浏览器支持onunload，onabort，onerror，onresize，onscroll和onzoom属性

浏览器支持onbegin，onend，onrepeat和onload属性

浏览器支持<cursor>元素

浏览器支持<a>元素

浏览器支持xlink:type，xlink:href，xlink:role，xlink:arcrole，xlink:title，xlink:show和xlink: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>

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

扫码关注腾讯云开发者

领取腾讯云代金券