<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