jhamlet / svg-react-loader

Webpack SVG to React Component Loader
MIT License
559 stars 82 forks source link

Loader adds translate instruction that it should not.. #80

Closed cuevash closed 6 years ago

cuevash commented 7 years ago

Having the next svg:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1108.4 202.5" style="enable-background:new 0 0 1108.4 202.5;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#65B2E7;}
</style>
<g>

        <image style="overflow:visible;opacity:0.53;" width="4393" height="657" xlink:href="7CD9C98A78EF0C6E.png"  transform="matrix(0.24 0 0 0.24 29.995 23.8313)">
    </image>
    <g>
        <polygon class="st0" points="1066.2,37.5 1066.2,70 1066.2,102.5 1066.2,135 42.2,165 42.2,132.5 42.2,100 42.2,67.5       "/>
    </g>
</g>
</svg>

Gets converted to more o less:

<svg width="100%" x="0" y="0" height="165px" viewBox="0 0 1062 165" version="1.1">
    <title>Shape</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <polygon id="path-1" points="1024 0 1024 32.5 1024 65 1024 97.5 0 127.5 0 95 0 62.5 0 30"></polygon>
        <filter x="-2.5%" y="-18.4%" width="105.0%" height="139.9%" filterUnits="objectBoundingBox" id="filter-2">
            <feGaussianBlur stdDeviation="3.98716518" in="SourceGraphic"></feGaussianBlur>
        </filter>
        <filter x="-3.2%" y="-24.3%" width="106.4%" height="151.7%" filterUnits="objectBoundingBox" id="filter-3">
            <feMorphology radius="2" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
            <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
        </filter>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="separacion_azul" transform="translate(20.000000, 17.000000)" fill-rule="nonzero">
            <g id="Shape" filter="url(#filter-2)">
                <use fill="black" fill-opacity="1" filter="url(#filter-3)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-1"></use>
                <use stroke="#979797" stroke-width="1" fill="#65B2E7" fill-rule="evenodd" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-1"></use>
            </g>
        </g>
    </g>
</svg>

There is this line in the code where you can see the translate.. When it should not be there as it is not in the original svg..

<g id="separacion_azul" transform="translate(20.000000, 17.000000)"

jhamlet commented 6 years ago

You have one svg created with Adobe Illustrator and another generated with Sketch...

...this doesn't even look svg-react-loader realted