Стиль SVG CSS Цвета - PullRequest
       13

Стиль SVG CSS Цвета

0 голосов
/ 04 июля 2018

Я Элиа, графический дизайнер. Приятно быть здесь с тобой. У меня большой вопрос. Мне нужно сделать анимацию SVG. На самом деле я использую Adobe CC Animate с плагином. Это код:

<svg xmlns="http://www.w3.org/2000/svg" width="550" height="400" baseProfile="basic" image-rendering="optimizeSpeed">
  <g overflow="visible">
    <path fill="#3C3C3B" d="M39.8 0H0v2.25h39.8V0z"/>
    <path fill="#898989" d="M2.2 2.25v15.9l4.7 3.6v55.9h30.65V2.25H2.2z"/>
    <path fill="#FFEC00" d="M26.25 21.2H17.5v4.5h8.75v-4.5z"/>
    <path fill="#3C3C3B" d="M38.3 36.15H19.35v3.2H38.3v-3.2zM31.6 41.95H19.4v3.15h12.2v-3.15zM39.4 46.8H4.3V49h35.1v-2.2z"/>
    <path fill="#575756" d="M17.85 70.95q1.8 1.8 4.4 1.8 2.55 0 4.4-1.8 1.8-1.85 1.8-4.4 0-2.6-1.8-4.4-1.85-1.8-4.4-1.8-2.6 0-4.4 1.85-1.85 1.8-1.8 4.35 0 2.6 1.8 4.4zM83.75 74v3.65H4.35V74H2.2v3.65h1.05v13.9H85v-13.9h1V74h-2.25z"/>
    <path fill="#575756" d="M75.1 72H52.55v4.2H75.1V72z"/>
    <path fill="#3C3C3B" d="M79.35 76.15H46.4v1.55h32.95v-1.55zM78.55 60.45q0-6.1-4.3-10.45-4.35-4.3-10.45-4.3T53.35 50q-4.3 4.35-4.3 10.45t4.3 10.4q4.35 4.3 10.45 4.3t10.45-4.3q4.3-4.3 4.3-10.4z"/>
    <path fill="#1D1D1B" d="M71.7 68.35q3.3-3.3 3.3-7.9v-.05q0-4.65-3.25-7.9-3.3-3.3-7.95-3.3-4.6 0-7.9 3.25-3.25 3.3-3.25 7.9Q52.6 65 55.9 68.3q3.25 3.3 7.9 3.3 4.6 0 7.9-3.25z"/>
    <path fill="#575756" d="M65.15 58.5q-.15-.1-.75-.35l1.75-8.6q-2.3-.7-4.55 0l1.75 8.55q-.45.1-.8.3l-4.85-7.3q-2.1 1.1-3.25 3.2l7.3 4.85q-.2.25-.35.75l-8.6-1.75q-.7 2.3 0 4.55l8.7-1.85q.05.4.3.8l-7.3 4.8q1.2 2.2 3.25 3.2l4.75-7.3q.5.3.75.35l-1.75 8.6q2.3.7 4.55 0l-1.75-8.55q.6-.1.8-.25l4.85 7.3q2.2-1.2 3.2-3.25l-7.3-4.8q.3-.4.35-.75l8.5 1.8q.7-2.25 0-4.55L66.15 60q-.1-.5-.3-.75l7.3-4.9q-1.1-2-3.2-3.15l-4.8 7.3z"/>
    <path fill="#3C3C3B" d="M65 40.3h-2.35v7.95H65V40.3zM25.45 80.95H18.2v7.25h7.25v-7.25z"/>
    <path fill="#59595B" d="M19 84.6q0 1.15.85 2 .8.85 2 .85 1.15 0 2-.85.8-.85.8-2 0-1.2-.8-2-.85-.85-2-.85h-.05q-1.15 0-2 .85-.8.8-.8 2z"/>
    <path fill="#FFEC00" d="M25.85 64.75h-7.2v3.7h7.2v-3.7z"/>
    <path fill="#9C9B9B" d="M65.2 61.85q.6-.55.6-1.4 0-.8-.6-1.4-.55-.6-1.4-.6-.8 0-1.4.6-.6.6-.6 1.4 0 .85.6 1.4.6.6 1.4.6.85 0 1.4-.6z"/>
    <path fill="#868686" d="M70.6 82.75H57.05v2.4H70.6v-2.4z"/>
  </g></svg>

К сожалению, цвета находятся внутри пути. Мне нужен SVG с цветом в стиле CSS. Если я попытаюсь сгенерировать SVG в иллюстраторе, это результат (посмотрите на часть в **):

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" baseProfile="basic" id="_x31__9_"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 450 450"
     xml:space="preserve">
**<style type="text/css">
    .st0{fill:#EAB38B;}
    .st1{fill:#97B6C4;}
</style>**
<g id="_x34_">
    <g id="_x32__6_">
        <g id="_x32__5_">
            <g id="_x32_">
                <g id="_x31_6_1_">
                    <g>
                        <path class="st0" d="M114.9,145.6c-0.1,0-0.3,0-0.4,0l-0.8,0.1c-0.8,0.1-0.6,0.3-1.4,0.4c-1.6,0.1-3.2,0-4.8,0.1
                            c-1.5,0.1-2.1-0.9-3-2c-1.4-1.8-3.7-3.5-4.3-5.8c-0.2-0.9-0.6-1.9-0.7-2.8c-0.1-0.8,0-1.5-0.2-2.3c-0.2-0.7-0.9-2.1,0.3-2
                            c0.3,0,0.9,0.1,1.1,0.3c0.5,0.4,0.9,1.1,1.1,1.7c0.1,0.5,0,1,0.2,1.4c0.2,0.6,0.6,1.2,0.9,1.7c0.1-1.6,0-2.9-0.2-4.5
                            c-0.1-1.3-0.2-2.6-0.3-3.9c-0.1-1.8-0.3-3.7-0.4-5.5c0,0,0,0,0,0c0-0.3-0.1-0.7-0.1-1.1c0-0.1,0.1-0.3,0.2-0.4
                            c0,0,0-0.1,0.1-0.1c0,0,0,0,0,0c0.1-0.1,0.1-0.1,0.2-0.2c0.6-0.5,1.3-0.5,2-0.2c0.1,0,0.1,0.1,0.2,0.1c0,0,0,0,0,0
                            c0.1,0.1,0.1,0.1,0.2,0.2c0.1,0.1,0.1,0.2,0.1,0.3c0,0.2,0,0.4,0,0.6c0.1,1.3,0.2,2.5,0.2,3.8c0.1,0.9,0.1,1.7,0.2,2.6
                            c0.1,0.8,0.2,2,0.5,2.3c0-0.2,0.1-0.5,0.1-0.7c0-0.2,0-0.5-0.1-0.7c0-0.4-0.2-1,0-1.5c0.2-0.8,1.5-1,2.1-0.6
                            c0.7,0.4,0.7,1.3,0.8,2c0,0.2,0.3,0.9,0.4,0.6c0.2-0.6,0.2-1.7,0.5-2c0.4-0.6,1.4-0.7,2-0.3c0.9,0.6,0.8,2.1,0.9,3
                            c0.2-0.2,0.1-0.8,0.3-1c0.2-0.3,0.7-0.5,1-0.5c1.5,0,1.4,1.8,1.5,2.9c0.3,1.9,0.4,3.8,0.4,5.7c0,0.9-0.1,1.9-0.2,2.8
                            c-0.2,0.8-0.7,1.5-0.8,2.3c-0.1,0.7,0.1,1.4,0.1,2.1c0,0.4,0,0.6,0.1,0.8C115,145.5,115,145.6,114.9,145.6z"/>
                        <polygon class="st1" points="116,144.6 104.5,145.2 105.1,148.4 116,147.3                        "/>
                    </g>
                </g>
            </g>
        </g>
    </g>
</g>
</svg>

Я ищу решения с конвертером или чем-то еще.

Большое спасибо!

...