<use>

1. <ellipse>
2. <image>
3. <line>
4. <path>
5. <polygon>
6. <polyline>
7. <rect>
8. <use>
9. SVG 元素

   1. A
      1. <a>
      2. <altGlyph>
      3. <altGlyphDef>
      4. <altGlyphItem>
      5. <animate>
      6. <animateColor>
      7. <animateMotion>
      8. <animateTransform>
   2. B-C
      1. <circle>
      2. <clipPath>
      3. <color-profile>
      4. <cursor>
   3. D
      1. <defs>
      2. <desc>
   4. E
      1. <ellipse>
   5. F
      1. <feBlend>
      2. <feColorMatrix>
      3. <feComponentTransfer>
      4. <feComposite>
      5. <feConvolveMatrix>
      6. <feDiffuseLighting>
      7. <feDisplacementMap>
      8. <feDistantLight>
      9. <feFlood>
      10. <feFuncA>
      11. <feFuncB>
      12. <feFuncG>
      13. <feFuncR>
      14. <feGaussianBlur>
      15. <feImage>
      16. <feMerge>
      17. <feMergeNode>
      18. <feMorphology>
      19. <feOffset>
      20. <fePointLight>
      21. <feSpecularLighting>
      22. <feSpotLight>
      23. <feTile>
      24. <feTurbulence>
      25. <filter>
      26. <font>
      27. <font-face>
      28. <font-face-format>
      29. <font-face-name>
      30. <font-face-src>
      31. <font-face-uri>
      32. <foreignObject>
   6. G
      1. <g>
      2. <glyph>
      3. <glyphRef>
   7. H
      1. <hkern>
   8. I
      1. <image>
   9. J-L
      1. <line>
      2. <linearGradient>
   10. M
       1. <marker>
       2. <mask>
       3. <metadata>
       4. <missing-glyph>
       5. <mpath>
   11. N-P
       1. <path>
       2. <pattern>
       3. <polygon>
       4. <polyline>
   12. Q-R
       1. <radialGradient>
       2. <rect>
   13. S
       1. <script>
       2. <set>
       3. <stop>
       4. <style>
       5. <svg>
       6. <switch>
       7. <symbol>
   14. T
       1. <text>
       2. <textPath>
       3. <title>
       4. <tref>
       5. <tspan>
   15. U
       1. <use>
   16. V-Z
       1. <view>
       2. <vkern>

<use> element takes nodes from within the SVG document, and duplicates them somewhere else.

范例

html,body,svg { height:100% }

								

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/>
  <use href="#myCircle" x="10" fill="blue"/>
  <use href="#myCircle" x="20" fill="white" stroke="red"/>
  <!--
stroke="red" will be ignored here, as stroke was already set on myCircle.
Most attributes (except for x, y, width, height and (xlink:)href)
do not override those set in the ancestor.
That's why the circles have different x positions, but the same stroke value.
  -->
</svg>

								

The effect is the same as if the nodes were deeply cloned into a non-exposed DOM, then pasted where the 使用 element is, much like cloned template elements in HTML5.

Most attributes on 使用 do not override those already on the element referenced by 使用 . (This differs from how CSS style attributes override those set 'earlier' in the cascade). 仅 the attributes x , y , width , height and href 在 使用 element will override those set on the referenced element. However, any other attributes not set on the referenced element will be applied to the 使用 元素。

Since the cloned nodes are not exposed, care must be taken when using CSS to style a 使用 element and its cloned descendants. CSS properties are not guaranteed to be inherited by the cloned DOM unless you explicitly request them using CSS inheritance .

For security reasons, browsers may apply the same-origin policy on 使用 elements and may refuse to load a cross-origin URL in the href attribute. There is currently no defined way to set a cross-origin policy for 使用 元素。

警告： Since SVG 2, the xlink:href attribute is deprecated in favor of href 。见 xlink:href page for more information. However, xlink:href can still be required in practice for cross-browser compatibility (see the 兼容性表格 below).

属性

href

The URL to an element/fragment that needs to be duplicated. Value type : <URL> ; 默认值 : none; Animatable : yes

xlink:href

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the 兼容性表格 at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

An <IRI> reference to an element/fragment that needs to be duplicated. Value type : <IRI> ; 默认值 : none; Animatable : yes

x

The x coordinate of the use element. Value type : <coordinate> ; 默认值 : 0 ; Animatable : yes

y

The y coordinate of the use element. Value type : <coordinate> ; 默认值 : 0 ; Animatable : yes

width

The width of the use element. Value type : <length> ; 默认值 : 0 ; Animatable : yes

height

The height of the use element. Value type : <length> ; 默认值 : 0 ; Animatable : yes

注意： width ，和 height have no effect on 使用 elements, unless the element referenced has a viewbox - i.e. they only have an effect when 使用 refers to a svg or symbol 元素。

注意： Starting with SVG2, x , y , width ，和 height are Geometry Properties , meaning those attributes can also be used as CSS properties for that element.

全局属性

Core Attributes

Most notably: id , tabindex

Styling Attributes

class , style

Conditional Processing Attributes

Most notably: requiredExtensions , systemLanguage

Event Attributes

Global event attributes , Graphical event attributes

Presentation Attributes

Most notably: clip-path , clip-rule , color , color-interpolation , color-rendering , cursor , display , fill , fill-opacity , fill-rule , filter , mask , opacity , pointer-events , shape-rendering , stroke , stroke-dasharray , stroke-dashoffset , stroke-linecap , stroke-linejoin , stroke-miterlimit , stroke-opacity , stroke-width , transform , vector-effect , visibility

ARIA Attributes

aria-activedescendant , aria-atomic , aria-autocomplete , aria-busy , aria-checked , aria-colcount , aria-colindex , aria-colspan , aria-controls , aria-current , aria-describedby , aria-details , aria-disabled , aria-dropeffect , aria-errormessage , aria-expanded , aria-flowto , aria-grabbed , aria-haspopup , aria-hidden , aria-invalid , aria-keyshortcuts , aria-label , aria-labelledby , aria-level , aria-live , aria-modal , aria-multiline , aria-multiselectable , aria-orientation , aria-owns , aria-placeholder , aria-posinset , aria-pressed , aria-readonly , aria-relevant , aria-required , aria-roledescription , aria-rowcount , aria-rowindex , aria-rowspan , aria-selected , aria-setsize , aria-sort , aria-valuemax , aria-valuemin , aria-valuenow , aria-valuetext , role

XLink Attributes

xlink:href , xlink:title

用法注意事项

规范

浏览器兼容性

BCD tables only load in the browser

Found a problem with this page?

• Edit on GitHub
• Source on GitHub
• Report a problem with this content on GitHub
• Want to fix the problem yourself? See our Contribution guide .

最后修改： Sep 23, 2021 , 由 MDN 贡献者