Sideway
output.to from Sideway
Draft for Information Only

Content

<use>
 Example
 Attributes
  Global attributes
 Usage notes
 Specifications
 Sources and References

<use>

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

Example

SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
<svg style='border:1px solid black' width='380' height='150' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
<svg width='326' height='126' viewBox='-25, -25, 326, 126' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
       <path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
   </pattern>
   <pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
       <rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
       <path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
   </pattern>
   <rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
  
   <svg transform='scale(0.920245398773006)' preserveAspectRatio='xMinYMin' 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>
  </svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='295' y='17' font-size='20'>(30,0)</text>
<text x='5' y='145' font-size='20'>(0,10)</text>
<text x='295' y='145' font-size='20'>(30,10)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='325' cy='25' r='2' fill='black'/>
<circle cx='25' cy='125' r='2' fill='black'/>
<circle cx='325' cy='125' r='2' fill='black'/>
</svg>
HTML Web Page Embedded Output:

Attributes

href The URL to an element/fragment that needs to be duplicated. Value type: <URL> ; Default value: 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 compatibility table 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> ; Default value: none; Animatable: yes x The x coordinate of the use element. Value type: <coordinate> ; Default value: 0; Animatable: yes y The y coordinate of the use element. Value type: <coordinate> ; Default value: 0; Animatable: yes width The width of the use element. Value type: <length> ; Default value: 0; Animatable: yes height The height of the use element. Value type: <length> ; Default value: 0; Animatable: yes

Note: width, and height have no effect on use elements, unless the element referenced has a viewbox - i.e. they only have an effect when use refers to a svg or symbol element.

Note: Starting with SVG2, x, y, width, and height are Geometry Properties, meaning those attributes can also be used as CSS properties for that element.

Global attributes

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

Usage notes

Categories Graphics element, Graphics referencing element, Structural element Permitted content Any number of the following elements, in any order:
Animation elements
Descriptive elements

Specifications

Scalable Vector Graphics (SVG) 1.1 (Second Edition) (SVG)

Sources and References

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use
©sideway

ID: 211200017 Last Updated: 12/17/2021 Revision: 0 Ref:

close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close
Latest Updated LinksValid XHTML 1.0 Transitional Valid CSS!Nu Html Checker Firefox53 Chromena IExplorerna
 IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 339

Reference 79

Computer

Hardware 249

Software

Application 213

Digitization 32

Latex 52

Manim 205

KB 1

Numeric 19

Programming

Web 289

Unicode 504

HTML 66

CSS 65

SVG 46

ASP.NET 270

OS 429

DeskTop 7

Python 72

Knowledge

Mathematics

Formulas 8

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 34

Coordinate Geometry 2

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Natural Sciences

Matter 1

Electric 27

Biology 1

Geography 1

Copyright © 2000-2024 Sideway . All rights reserved Disclaimers last modified on 06 September 2019