Визуальное клонирование
HTML-элемента

html + svg + html

Элементы дерева DOM HTML не могут принадлежать одновременно более, чем одному узлу. Так, при операции appendChild добавление некоторого конкретного элемента к узлу в DOM-дереве вызовет его автоматическое удаление из любого другого узла. Для копирования элементов есть операция cloneNode, однако это лишь копирование, а создание ссылки, горизонтальной связи в DOM-дереве — невозможно. Но возможно создать визуальную копию элемента с помощью SVG.

Встроенный SVG

С недавних пор SVG-изображения, а также встроенный XML SVG стали поддерживаться браузерами: 

<svg height="128" width="128">
  <rect x='32' y='32' width="64" height="64" " fill="black"/>
</svg>

Кроме векторов, стандарт встроенного SVG поддерживает трансформации, анимацию и фильтры. Так, мы можем построить фильтр визуального копирования: 

<svg height="128" width="128">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="18" dy="18"/>
      <feBlend in="SourceGraphic" in2="offOut" mode="normal"/>
    </filter>
  </defs>
  <rect x='24' y='24' width="64" height="64" fill="black" filter='url(#f1)'/>
</svg>

HTML, встроенный во встроенный SVG

Но кроме векторов SVG поддерживает также и встраивание HTML-документа внутрь тела SVG посредством элемента foreignObject:

<svg height="64" width="128">
  <foreignobject x="32" y="16" width="64" height="64">
    <body>
      <div>html</div>
    </body> 
  </foreignobject>    
</svg>

html

Алхимия

Объединяя эти две возможности: графическое копирование и встраивание HTML, мы можем визуально клонировать встроенный HTML-документ: 

<svg height="64" width="128">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"/>
      <feBlend in="SourceGraphic" in2="offOut" mode="normal"/>
    </filter>
  </defs>
  <foreignobject x="28" y="8" width="96" height="64" filter='url(#f1)'>
    <body>
      <div>html</div>
    </body> 
  </foreignobject>    
</svg>

html

 

Кроме простого копирования, SVG предоставляет широкий набор графических фильтров, которые можно посмотреть здесь. Также рекомендую блог по SVG и вебдизу.

 

Всем преодоления всего невозможного]

 

shitpoet@gmail.com

 



 

free hit counters