Как оживить изображение внутри SVG (с CSS?)

У меня есть SVG с изображением внутри, и мне интересно, могу ли я оживить это с помощью CSS?Как оживить изображение внутри SVG (с CSS?)

У меня есть это, чтобы преобразовать, когда он перевернулся, но он немного прыгает, что является странным эффектом, но потом я подумал, что, возможно, есть возможность сделать его более естественным, если он анимирован, например, с эффект отскока, который я видел в анимации CSS3.

У кого-нибудь есть идеи о том, как я могу это сделать изнутри svg (png внутри текстового символа)?

Он выглядит лучше на моем сайте, чем в этом JSFiddle, в котором он почему-то немного размывается.

код

SVG:

<svg width="50px" height="50px" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" style="width: 50px;height: 50px;"> 
    <defs> 
     <pattern id="img1" patternUnits="userSpaceOnUse" width="118" height="108"><image xlink:href="https://31.media.tumblr.com/9766ee4952b593bbc1af5e2d2249c858/tumblr_inline_mxnnn7dXwh1s16nrs.jpg" x="0" y="0" width="50" height="50"></image> 
     </pattern> 
    </defs> 
<text x="0" y="0" font-size="59" fill="url(#img1)"> 
     <tspan x="-1" y="49">▼</tspan> 
    </text> 

</svg>

Нет JS или каркасы плз

UPDATE Так я нашел тег для SVG, но я бы не быть в состоянии повернуть изображение или иметь его движение (не так ли?), не перемещая весь объект (т. е. треугольник, что не то, что я после ...)

Скрипка теперь оживляет непрозрачность (хотя и не очень хорошо, никогда не достигает полностью непрозрачный)

UPDATE 2 Randak говорит в комментариях это выглядит размыто на моем сайте, я на последней стабильной Chrome (Chrome OS), и она хорошо выглядит на малых и больших ... enter image description here

источник

2013-12-13 Louis Maddox

Не совсем видеть прыжки. Что именно вы хотите сделать? Неясно, какую анимацию вы хотите. – randak

Если вы удалите недвижимость со скрипки, вы увидите, что я имею в виду. –

Любая гладкая анимация была бы крутой. Возможно, если изображение должно перемещаться с эффектом отскока или что-то в этом роде, то есть, если изображение может быть анимировано отдельно –

Возможно, что «прыжок», который вы видите, привязывается к различным шрифтам при масштабировании. Вы можете использовать text-rendering: geometricPrecision, чтобы надежно устранить это. Однако, если ваша фигура - всего лишь треугольник, почему бы не просто использовать элемент <path>? Это обычно лучше и всегда будет плавно переходить.

Вот пример использования элемента пути с шаблоном: http://jsfiddle.net/N7njg/ (к сожалению, кажется, что хром имеет ошибку с анимированием атрибута x шаблона).

источник

2013-12-13 09:58:08

Это был мой первый план, забыли об этом. Не удалось создать путь в [SVG-edit] (http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html), хотя и попытался поэкспериментировать с другими способами. Подсказка была связана с масштабом изображения внутри текстового символа (который фактически перешел на v хорошо) –

На самом деле выяснилось, как получить дорожки и код SVG - выглядит намного приятнее! –

Я предполагаю, что мне нужно использовать clipPath как-то сейчас ... http://jsfiddle.net/n7Wy6/4/ –

Как оживить изображение внутри SVG (с CSS?)

ответ

Смежные вопросы