search

software-mansion / react-native-svg

SVG library for React Native, React Native Web, and plain React web projects.
MIT License
7.4k stars 1.12k forks source link

An image inside a rect that has a different width\height (image is scaled), will be translated within the rect #1579

Open M-i-k-e-l opened 3 years ago

M-i-k-e-l commented 3 years ago

Bug

An image inside a rect that has a different width\height (and so the image has to be scaled), will be translated within the rect. image

Expected behavior

If you paste the xml below into a web editor\viewer (example of a viewer), you will get this: image

Unexpected behavior

If you use the example below you will get the following (both iOS and Android): image BTW, changing the location of the rectangle will change the translation (this is with x="20" y="40"): image and with x="0" y="0"): image

So it seems that the rect's location is affecting the translation of the image.

Environment info

React native info output:

System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 1.62 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 11.13.0 - ~/.nvm/versions/node/v11.13.0/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v11.13.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      API Levels: 21, 22, 23, 24, 25, 26, 27, 28, 29, 30
      Build Tools: 26.0.1, 26.0.3, 27.0.3, 28.0.3, 29.0.0, 29.0.2, 30.0.2, 30.0.3
      System Images: android-19 | Google APIs Intel x86 Atom, android-22 | Google APIs Intel x86 Atom, android-24 | Google Play Intel x86 Atom, android-26 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom
      Android NDK: 17.2.4988734
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.7199119
    Xcode: 12.4/12D4e - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_201 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1
    react-native: 0.64.0 => 0.64.0
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 12.1.1

Steps To Reproduce

react-native init svg_translated_image
cd svg_translated_image/
yarn add react-native-svg
cd ios && pod install && cd ..
modify App.js (see below) -> run the app

modify App.js: add the following to your imports (within App.js):

const SvgXml = require('react-native-svg').SvgXml;
const xml = `
<svg width="320px" height="260px" viewBox="0 0 320 260" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <rect id="path-5" x="80.327848" y="115.013498" width="27.8658912" height="27.6521766" rx="1.905568"></rect>
    <pattern id="pattern-7" patternUnits="objectBoundingBox" width="100%" height="100%">
      <use xlink:href="#image-8" transform="scale(0.453314371,0.453314371)"></use>
    </pattern>
    <image id="image-8" width="62" height="61" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAA9CAYAAAD1VdrqAAAABGdBTUEAALGOfPtRkwAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAPqADAAQAAAABAAAAPQAAAABig1ArAAAE9klEQVRoBe2aWSh9XxTH19XNGyklSpEnQ0rJ9GRIytRf4sFQhjJEogyhzC+SMfHggYRCEg8oDzKV6d1QisSLPCEp9Pv57n/7ds65xx3cfa6fzt3F2Xuvvc9Zn73W3ueshSEwMPAP6bAYdUn9aWgj/dEnupsOvZwhu8D1ZnmXxV0W18kKGG3lvL6+tnXoj4/7/CizqoNu97jNFudLaMtq8rHOvtrjlbq1uAvc2W75089zWfynLWDL893cxNlJ2J1SUlJoYmJCVf+goCCanp6m2NhYVTnvjIiIoPn5eQoPD+ddsuvJyQllZWXJ+r7bEAaek5NDgC8tLTXTJT4+nvDT0dFhJpN2rKyssMUJCQmRdrM65np7e9Pw8LCZ7DsdwsAbGhro6emJ2tvbKTQ0VKbL1NQUra+vE4AgVyvSRVlcXJQNSU9Pp5KSEtYXHBwsk323IQz88fGRysrKmB79/f1m+nR2dtLDwwPziKioKJncEpivry+NjY2x8YWFhfT6+iqb+92GMHAocHh4SJOTk8zidXV1Mp3u7++Zq4+OjhL2Ki/WwLq7u9nQoaEh2t/f59McvgoFhzbYg3d3dwRwpcuvra3RwMCATGkOhnlKsPLycnZu7O3t0cjIiGyeow3h4NZcXqpwRUUFA9vd3TU7tCIjI6m1tZUNb2trk04TUhcODq1OT08ZCCyudHmuNcBaWlro5eVF9cDjnoBD057gg9/f2lUTcDwUrnt2dsbAPT09zfTgYDjllWBdXV0UFhbG3ulLS0tmc0V0aAYO5err62lzc5Pg/tJiCSwzM5OKioro8vKStHBxrochICDApr8ocKs4Go8DDCc7wFJTU+nt7Y3rQn5+frSxsUFeXl6Ul5dHBwcHJpktFXt01NTiSmUB1tPTw7phTSk0OiEDNE5+e6GVz7LWdiq4JbDKykpKTk6mnZ0d5hHWFHdU7jRwS2D4kmtubqbn52dN97V0sZwCbgkMoab0hL+5uZHqp1ldc3CDwWDa13h1KcEAjeBlbm6OlpeXNQNV3lhzcOxrRFRqYIitEXhcXFyYhawIcbUsmoJLwZThqL+/v8wT3t/fTZyQIcL76qvPNNCBimbgUJ7vXby6Pj4+ZGrCEzw8PKivr4+Ojo5kstvbW1OgYy1rI5toR0MzcEDjUxVgx8fHMpWqq6spMTGRtra2aHx8XCbjDXz1ocDyap+8fNx3r5qAV1VVUVJSkipYTEwMNTY2Mn2V7i+F4IEOPEcLlxcODrCmpiZVMKPRSAsLC0wGGLi0pcIDHeTxRLu8UHApWG1trRkY3/Ozs7OExKK0wLUzMjKkXayOdBZyecjginR5oeCIulBmZmZodXWV1fmv7Oxsys/PZ01l1BUdHU01NTWE+T4+PnwKu8IrkHYCtFouTzbYjoYwcIAVFBSwRyv37mcESIODg0yWm5v7+R9m8oAQhx8ysUgfIympLMjjIZ+Hd7uo97sQcHd3d8r67/9EvxoY4muU3t5eWaJRCghrn5+fU1paGhUXF0tFrM7T18jfiyhC43HkvmE5tZKQkEDb29tqIlNfXFwcIQ+HRbi6ujL18woOOFj+q2JPPC4U/CuFnNVvD7gQV3cWmMjnuMBFruZvuJfL4r/BSiJ1NNp7M35y2jvvXxuvW1e3+T3+r1nMUX10a3EXuKOu89vmuyz+2yzmqL4uizu6gr9tvm4t/hdM0uAH869P+gAAAABJRU5ErkJggg=="></image>
  </defs>
  <g>
    <g>
      <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
      <use fill="url(#pattern-7)" fill-rule="evenodd" xlink:href="#path-5"></use>
    </g>
  </g>
</svg>
`;

Usage within App.js:

<SvgXml xml={xml} />

I hope the example is simple enough, please let me know if you require a project as well.

hipsty3 commented 2 years ago

I'm having the same issue as well. Did you manage to resolve this @M-i-k-e-l ?

M-i-k-e-l commented 2 years ago

Not via code, I think our UX removed some of the layers from the SVG image; however this does not seem like a good solution for all cases.