Логотип SVG анимирует, но обрезает viewBox - PullRequest
Новая
       56

Логотип SVG анимирует, но обрезает viewBox

0 голосов
/ 11 января 2019

Я успешно анимировал части логотипа SVG, но внешние края при вращении оказываются вне области просмотра. Я играл с этим часами, но не могу понять, как по существу добавить «отступы» во внутреннюю часть viewBox, чтобы предоставить место для анимации. 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="5px" y="5px" viewBox="0 0 625.1 160" style="enable-background:new 0 0 625.1 160;" xml:space="preserve" class="ccc-gear position-2">
    <g class="gear-group">

Вот пример того, что происходит: https://jsfiddle.net/inhouse/Labrz1vg/13/

Любая помощь очень ценится, поскольку я уверен, что столкнусь с этим и в будущих проектах!

1 Ответ

0 голосов
/ 11 января 2019

Как я уже говорил, простым решением этой проблемы является добавление svg{overflow: visible;} в CSS.

Однако, если это не работает, вы можете немного подправить код.

  1. В вашем CSS у вас есть transform-origin: 13.2% 46.5%; Я изменил это на transform-origin: 82.5px 74.5px;, так как хочу, чтобы он был жестко запрограммирован. Я немного изменю размер svg, и эти проценты больше не будут работать. Мои цифры - грубое приближение. Вы можете быть уверены, что это то, что вам нужно.
  2. Я изменил viewBox на -10 -15 625.1 180. В вашем коде у вас также есть enable-background с теми же значениями, что и viewBox. Если вам это не нужно, вы можете удалить его.
...