Тег use

Позволяет использовать SVG элементы в разных местах страницы. Позволяет создавать SVG-спрайты

<svg style="display: none;">
   <symbol id="tick-icon" viewBox="0 0 515.556 515.556">
      <path d="m0 274.226 176.549 176.886 339.007-338.672-48.67-47.997-290.337 290-128.553-128.552z"/>
   </symbol>
</svg>

<svg>
  <use href="#tick-icon" width="75" height="75" fill="#09ac1e"></use>
</svg>

поддерживается начиная с
частичная поддержка до
не поддерживается

Атрибуты

href="#tick-icon"

Ссылка на элемент SVG, который хотите использовать на странице

<svg style="display: none;">
   <symbol id="tick-icon" viewBox="0 0 515.556 515.556">
      <path d="m0 274.226 176.549 176.886 339.007-338.672-48.67-47.997-290.337 290-128.553-128.552z"/>
   </symbol>
</svg>

<svg>
  <use href="#tick-icon"></use>
</svg>

width="75"

Ширина элемента. Можно определять в CSS

<svg style="display: none;">
   <symbol id="tick-icon" viewBox="0 0 515.556 515.556">
      <path d="m0 274.226 176.549 176.886 339.007-338.672-48.67-47.997-290.337 290-128.553-128.552z"/>
   </symbol>
</svg>

<svg>
  <use href="#tick-icon" width="75"></use>
</svg>
 
<svg class="example-width">
  <use href="#tick-icon"></use>
</svg>

<style>
    .example-width {
      display: block;
      width: 75px;   
    }
</style>

height="75"

Высота элемента. Можно определять в CSS

<svg style="display: none;">
   <symbol id="tick-icon" viewBox="0 0 515.556 515.556">
      <path d="m0 274.226 176.549 176.886 339.007-338.672-48.67-47.997-290.337 290-128.553-128.552z"/>
   </symbol>
</svg>

<svg>
  <use href="#tick-icon" width="75" height="75"></use>
</svg>
 
<svg class="example-height">
  <use href="#tick-icon"></use>
</svg>

<style>
    .example-height {
      display: block;
      width: 75px;   
      height: 75px;
    }
</style>

x="10"

Координата по оси X, определяет точку начала вставки SVG элемента по горизонтали

<svg style="display: none;">
   <symbol id="tick-icon" viewBox="0 0 515.556 515.556">
      <path d="m0 274.226 176.549 176.886 339.007-338.672-48.67-47.997-290.337 290-128.553-128.552z"/>
   </symbol>
</svg>

<svg style="display: block;">
  <use href="#tick-icon" width="75" height="75" fill="#09ac1e"></use>
</svg>

<svg style="display: block;">
  <use href="#tick-icon" width="75" height="75" fill="#09ac1e" x="50"></use>
</svg>

y="10"

Координата по оси Y, определяет точку начала вставки SVG элемента по вертикали

<svg style="display: none;">
   <symbol id="tick-icon" viewBox="0 0 515.556 515.556">
      <path d="m0 274.226 176.549 176.886 339.007-338.672-48.67-47.997-290.337 290-128.553-128.552z"/>
   </symbol>
</svg>

<svg style="display: block;">
  <use href="#tick-icon" width="75" height="75" fill="#09ac1e"></use>
</svg>

<svg style="display: block;">
  <use href="#tick-icon" width="75" height="75" fill="#09ac1e" y="50"></use>
</svg>

fill="#444444"

Заливка SVG элемента. Можно определять в CSS

<svg style="display: none;">
   <symbol id="tick-icon" viewBox="0 0 515.556 515.556">
      <path d="m0 274.226 176.549 176.886 339.007-338.672-48.67-47.997-290.337 290-128.553-128.552z"/>
   </symbol>
</svg>

<svg>
  <use href="#tick-icon" width="75" height="75" fill="#666666"></use>
</svg>

<svg class="example-fill">
  <use href="#tick-icon" width="75" height="75"></use>
</svg>

<style>
    .example-fill {
        fill: #444444;   
    }
</style>

stroke="#000000"

Обводка SVG элемента. Можно определять в CSS

<svg style="display: none;">
   <symbol id="tick-icon" viewBox="0 0 515.556 515.556">
      <path d="m0 274.226 176.549 176.886 339.007-338.672-48.67-47.997-290.337 290-128.553-128.552z"/>
   </symbol>
</svg>

<svg>
  <use href="#tick-icon" width="75" height="75" fill="#ffffff" stroke="#000000"></use>
</svg>

<svg class="example-stroke">
  <use href="#tick-icon" width="75" height="75"></use>
</svg>

<style>
    .example-stroke {
        fill: #ffffff;
        stroke: #000000;   
    }
</style>

stroke-width="5"

Толщина обводки. Можно определять в CSS

<svg style="display: none;">
   <symbol id="tick-icon" viewBox="0 0 515.556 515.556">
      <path d="m0 274.226 176.549 176.886 339.007-338.672-48.67-47.997-290.337 290-128.553-128.552z"/>
   </symbol>
</svg>

<svg>
  <use href="#tick-icon" width="75" height="75" fill="#ffffff" stroke="#000000" stroke-width="5"></use>
</svg>

<svg class="example-stroke-width">
  <use href="#tick-icon" width="75" height="75"></use>
</svg>

<style>
    .example-stroke-width {
        fill: #ffffff;
        stroke: #000000;   
        stroke-width: 5px;
    }
</style>

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии

Тег use

Позволяет использовать SVG элементы в разных местах страницы. Позволяет создавать SVG-спрайты

Атрибуты

Читайте также

Обсуждение (0)