search

vault-development / react-native-svg-uri

Render SVG images in React Native from an URL or static file
849 stars 334 forks source link

incorrectly rendering SVG. #104

Closed sosukesuzuki closed 6 years ago

sosukesuzuki commented 6 years ago

HI! Thank you for providing such a good library. When I render the svg file made with Sketch, it is rendered incorrectly.

environment

react-native: 0.50.3 react-native-svg: 5.5.1 react-native-svg-uri: 1.2.3

overview

correct.

2018-01-06 17 40 20

actual incorrect.

2018-01-06 17 39 26

svg code.

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="20px" viewBox="0 0 24 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
    <title>icon-code</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Edit-Page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-77.000000, -562.000000)">
        <g id="icon-code" transform="translate(71.000000, 554.000000)">
            <g>
                <rect id="Rectangle-3" fill="#D8D8D8" opacity="0" x="0" y="0" width="36" height="36"></rect>
                <g transform="translate(6.000000, 7.000000)" fill="#717171">
                    <g id="file-code" transform="translate(0.000000, 4.714286)" fill-rule="nonzero">
                        <path d="M20.5533981,6.28571429 L17.3616505,9.06410564 C16.9474038,9.42470417 16.9039133,10.0528404 17.2645119,10.4670871 C17.2946135,10.5016671 17.3270705,10.5341241 17.3616505,10.5642257 L17.5161277,10.6986969 C17.9215349,11.0516007 18.5250671,11.0516007 18.9304743,10.6986969 L23.0667541,7.09809758 C23.515421,6.70753654 23.5625251,6.02720787 23.1719641,5.57854097 C23.1393612,5.54108766 23.1042074,5.50593381 23.0667541,5.473331 L18.9304743,1.87273171 C18.5250671,1.5198279 17.9215349,1.5198279 17.5161277,1.87273171 L17.3616505,2.00720288 C16.9474038,2.36780141 16.9039133,2.99593759 17.2645119,3.4101843 C17.2946135,3.44476432 17.3270705,3.47722129 17.3616505,3.50732293 L20.5533981,6.28571429 Z" id="Shape"></path>
                        <path d="M0.933245918,7.09809758 L5.06952571,10.6986969 C5.47493292,11.0516007 6.07846514,11.0516007 6.48387234,10.6986969 L6.63834951,10.5642257 C7.05259623,10.2036272 7.09608667,9.57549098 6.73548814,9.16124427 C6.7053865,9.12666425 6.67292954,9.09420728 6.63834951,9.06410564 L3.44660194,6.28571429 L6.63834951,3.50732293 C7.05259623,3.1467244 7.09608667,2.51858822 6.73548814,2.10434151 C6.7053865,2.06976149 6.67292954,2.03730452 6.63834951,2.00720288 L6.48387234,1.87273171 C6.07846514,1.5198279 5.47493292,1.5198279 5.06952571,1.87273171 L0.933245918,5.473331 C0.484579017,5.86389203 0.437474906,6.5442207 0.828035943,6.9928876 C0.860638758,7.03034091 0.895792608,7.06549476 0.933245918,7.09809758 Z" id="Shape"></path>
                    </g>
                    <rect id="Rectangle-6" transform="translate(12.235665, 11.086490) rotate(-70.000000) translate(-12.235665, -11.086490) " x="1.89025329" y="10.3007755" width="20.6908233" height="1.57142857" rx="0.785714286"></rect>
                </g>
            </g>
        </g>
    </g>
</svg>
Crash-- commented 6 years ago

This is a react-native-svg issue since transform is not supported well enough. They have done some work on that, try to update react-native-svg to their latest master to see if it fix your issue.

See https://github.com/react-native-community/react-native-svg/search?q=transform&type=Issues&utf8=%E2%9C%93

Crash-- commented 6 years ago

You can also try to add transform here https://github.com/vault-development/react-native-svg-uri/blob/8e41aa917636253785ee7a6d84aedcb93ea8cc3c/index.js#L62

nesc58 commented 6 years ago

The pull request adds transform and some other attributes. https://github.com/vault-development/react-native-svg-uri/pull/100

sosukesuzuki commented 6 years ago

@Crash-- Thank you for telling it me! It can help me. @nesc58 Thank you for sending its PR. I am waiting merging your PR!