Машинки на чистом SVG

[Stdit]

Ожидал увидеть машинки в посте.
Если кому тоже интересно, вот прямые ссылки на работы:
y3x.ru/sandbox/svg-demos/rally.svg
y3x.ru/sandbox/svg-demos/race.svg
y3x.ru/sandbox/svg-demos/carSpeed.svg
y3x.ru/sandbox/svg-demos/parking.svg
y3x.ru/sandbox/svg-demos/carLights.svg

[ainte]

Да, хорошая мысль — исправляюсь.

[kekekeks]

Хинт: чтобы не нарушать правила хабра ведёте блог на английском, а тут оформляете как перевод.

[ainte]

Спасибо за совет, как я сам не догадался?

[Derailed]

Хабр сам свои же правила и нарушает. Раньше для «борьбы с копипастом» были топик-ссылки. И где теперь они?.. Теперь нет другого выхода, кроме как копипастить. С переводом или без.

[kekekeks]

ТМ нужен оригинальный контент, а не раскрутка чужих ресурсов топиками-ссылками.

[Derailed]

ИМХО, запрет топиков-ссылок похож на борьбу с ветряными мельницами. Чтобы по-настоящему убрать раскрутку чужих ресурсов с помощью ссылок, придется в статьях и комментариях также ссылки запрещать.

[kekekeks]

Ну тут уже по принципу «ты мне — я тебе». Пишете оригинальный контент — получаете доступ к колоссальным PR и ТиЦ хабра.

[Derailed]

Для того, чтобы вставить в коммент любую ссылку, не нужно ни много ума, ни оригинального контента, ни усилий. А для поисковой системы принципиальной разницы между ссылкой в комментарии и топик-ссылкой нет, поэтому эффект от ссылки в «полезном контенте» и от ссылки в комментарии будет примерно одинаковый. (Мы все мечтаем обучить наделить компьютеры искусственным разумом, но наверное в ближайшие тысячелетия этого не произойдет.)

Возможно, что есть только разница в том, что топик-ссылки проще отслеживать и модерировать (потому что они на виду), чем мусорные ссылки в комментариях. Мусорные ссылки в комментариях создавать также немного проще, чем делать специальные топик-ссылки. Поэтому, как мне кажется, запрет топик-ссылок бесполезен по двум причинам — во-первых, он ничего не решает, а во-вторых, заставляет авторов статей делать копипаст.

[webhamster]

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

[KoppeKTop]

Эх, Safari 5.1.5 (7534.55.3), OS X 10.7.3 – рисует только дороги.

[valerypride]

Хром 18.0.1025.162 m, Win 7 — тоже одни дороги.

[QuickStudio]

У меня так же, но когда открыл именно из блога автора то они заработали. ЧЯДНТ?

[SowingSadness]

Таким же способом заставил работать гонки — ))))))
«ковдовство»

[ninacarrot]

<image xlink:href="car/red.svg" width="1100" height="700" />

Видимо, дело в этом.

[ainte]

Да, именно в этом.
Думаю есть смысл попробовать поставить externalResourcesRequired="true".

[ninacarrot]

Проверил в 16м Хроме, Iceweasel 3.5 — пустота. В 11й Опере работает.

[Serator]

Вся основная информация на русском приведена на http://www.intuit.ru/department/graphics/svg/. Подробнее уже в спеке смотреть, аль MDN на английском.

[ainte]

Постараюсь найти время и приготовить материал.

[moscow_beast]

> По умолчанию Inkscape делает координаты относительными и в результате множество чисел становится отрицательными.

Эта не единственная проблема Inkscape. Самый чистый код SVG генерит Adobe Illustrator. Ситуация прямо противоположная Photoshop vs Gimp в PNG.

[Apostol]

В Inkscape при сохранении можно выбрать чистый SVG или с дополнительной информацией, облегчающей дальнейшее редактирование (настройки программы, документа, различных графических объектов, не являющихся частью SVG).

[ddsl]

Не много не по машинкам, но не подскажите как нормально сделать масштабирование элемента при наведении( чтобы при наведении объект увеличивался например). Пытался делать такое через jquery но никак не мог найти инфу как центр трансформации определять.

[Serator]

CSS — transform-origin.
SVG — есть неплохой ответ на StackOverflow.

Возможны и иные варианты, передвигая сам элемент (собственное здесь можно было бы использовать js), но сей вариант разве что для совместимости с недобраузерами.

[Serator]

Ах, да, translate в CSS / SVG тоже сгодится.

[ddsl]

Дело в том что элементов куча с этим классом, и у каждого нужно как то центр масштабирования определить, пытался через js координаты мыши подставлять но нормально не получалось, все время при наведении объект улетал в другое место, потом возвращался. Может есть параметр который заставит масштабироваться объект не от начала координат а именно от своего центра? А так как объекты были path то центр взять прямо из кода не получилось, ну или я дурак( что вероятнее).

[Serator]

Хм, видать вам нужно использовать scale наряду с translate, дабы смещать попутно координаты. Можно ли их вычеслить не прибегая к js — "?".

Кое-какая информация есть по этим 2-ум ссылкам:
msdn.microsoft.com/ru-ru/library/gg589508%28v=vs.85%29.aspx
www.w3.org/TR/1999/WD-SVG-19990412/coords.html#propdef-margin-top

Там есть формули высчитывания трансформаций относительно центра + предложения изменения масштаба самого холста, но здесь уж сами разбирайтесь :).

[ddsl]

Ну да с транслейт, я даже формулы нагугливал) Но все упиралось в то что для каждого объекта нужно знать координаты центра, в итоге пробовал врунчую искать координаты для каждого отдельного объекта, но объектов то куча и каждому искать запаришся.

[Serator]

Хм, ну тогда js в помощь.
К примеру, берете:

element.getBoundingClientRect().width;
element.getBoundingClientRect().height;

где element — ссылка на нужный элемент (к примеру, document.querySelector('#document')).
Собственно делим на 2 и получаем расстояние от края элемента до центра. Ну а далее уже сами ;).

[Khoth]

Мне кажется мы на пороге открытия нового велосипеда…

[nzeemin]

Ещё примеры анимированных SVG можно здесь найти:
commons.wikimedia.org/wiki/Category:Animated_SVG

[ka8725]

А если в 3D машинку сделать с возможностью покрутить ее в браузере, здесь SVG поможет?

[ainte]

Можно сделать имитацию 3D, а сам по себе SVG двумерный.