react-native-svg icon indicating copy to clipboard operation
react-native-svg copied to clipboard

borderTopLeftRadius and borderTopRightRadius style elements not respected

Open bramski opened this issue 5 years ago • 0 comments

Bug

The following Svg File:

import React, {FC} from 'react';
import {Svg, G, Rect, Circle, Polygon, SvgProps} from 'react-native-svg';

type ImagePlaceholderProps = {
  width: number;
  height: number;
};

type SvgWithOmittedProps = Omit<SvgProps, 'width' | 'height' | 'viewBox' | 'preserveAspectRatio'>;

const ImagePlaceholder: FC<ImagePlaceholderProps & SvgWithOmittedProps> = ({width, height, ...moreProps}) => {
  console.log('MoreProps', moreProps);
  return (
    <Svg {...moreProps} width={width} height={height} viewBox="0 0 1600 1200" preserveAspectRatio="xMidYMid slice">
      <G id="Service-Placeholder" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
        <Rect id="Rectangle" fill="#E5E7F6" x="0" y="0" width="1600" height="1200" />
        <Circle id="Oval" fill="#D8D8D8" cx="824" cy="600" r="120" />
        <Polygon id="Triangle" fill="#F1EEEE" points="564 332 988 904 140 904" />
        <Polygon id="Triangle" fill="#FFFFFF" points="1024 444 1448 904 600 904" />
      </G>
    </Svg>
  );
};

export default ImagePlaceholder;

Used in the following way:

import React, {FC} from 'react';
import styled from 'styled-components/native';
import {responsiveWidth} from 'react-native-responsive-dimensions';

const LargePlaceholderImage = styled(ImagePlaceholder)`
  width: ${Math.round(responsiveWidth(66))}px;
  height: ${Math.round(responsiveWidth(33))}px;
  border-top-left-radius: ${Math.round(responsiveWidth(6))}px;
  border-top-right-radius: ${Math.round(responsiveWidth(6))}px;
`;

Does not round the upper corners of the SVG as expected: See Image: Screen Shot 2020-09-15 at 12 04 57 PM

Unexpected behavior

The image corners are sharp and unrounded. I expect them to be rounded as the passed in style attributes should clip the resulting image.

Environment info

React native info output:

info Fetching system and libraries information...
System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 183.24 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.18.3 - /usr/local/bin/node
    Yarn: 1.17.3 - ~/.yarn/bin/yarn
    npm: 6.14.6 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /Users/bram/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.7, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 22, 23, 24, 25, 26, 27, 28, 29
      Build Tools: 22.0.1, 24.0.0, 27.0.3, 28.0.3, 29.0.0, 29.0.2
      System Images: android-24 | Intel x86 Atom, android-24 | Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6626763
    Xcode: 11.7/11E801a - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_92 - /usr/bin/javac
    Python: 3.6.6 - /Users/bram/.pyenv/shims/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: 0.63.0 => 0.63.0

Library version: 12.1.0

bramski avatar Sep 15 '20 19:09 bramski