<animate> CSS-attr для XHTML <foreignObject> в SVG

Я встроил <div> в <svg> с помощью <foreignObject>, я бы хотел <animate>непрозрачность его атрибута CSS, исчезающая при загрузке страницы. Поэтому я указал локатор XLink, ссылающийся на целевой элемент, который нужно анимировать:

<g xmlns:xlink="http://www.w3.org/1999/xlink">
 <animate xlink:href="#animateThis" attributeType="CSS" attributeName="opacity"  from="0"  to="1"  begin="0s" dur="1s" fill="freeze" />
</g> 
<foreignObject>
 <body xmlns="http://www.w3.org/1999/xhtml">
  <div id="animateThis" style="opacity:0">
   The quick brown fox jumps over the lazy dog.
  </div>
 </body>
</foreignObject>

(SVG встроен в документ HTML5).

Тестирование в Chrome, не работает. На нативных элементах SVG, однако, это так. Как мне сделать это в объектах, встроенных с <foreignObject>?

Источник

1 ответ

Решение

Ширина и высота являются обязательными атрибутами для элементов foreignObject. Если вы не установите их, посторонний объект не должен отображаться вообще. Я не уверен, что именно это происходит в Chrome, но это определенно мешает тестовому сценарию работать в Firefox. Если я добавлю это, как здесь: http://jsfiddle.net/longsonr/dLrAN/ все работает, по крайней мере, в Firefox это делает в любом случае.

Однако, несмотря на эту работу в Firefox, спецификация SVG говорит только о том, что свойства CSS элементов SVG можно анимировать. Если свойства CSS в html-элементах можно анимировать с помощью SVG-анимации, это является бонусом, например, это не работает для меня в Opera 11.6

Источник
Другие вопросы по тегам