При использовании SVG-свойства preserveAspectRatio сохраняйте «соотношение сторон» поля «Путь клипа». - PullRequest
Новая
       67

При использовании SVG-свойства preserveAspectRatio сохраняйте «соотношение сторон» поля «Путь клипа».

0 голосов
/ 13 апреля 2020

У нас есть следующая SVG форма:

Форма плавника акулы

Shark Fin Shape

И мы поместите это в компонент RN с помощью «Путь обрезки» Rect с закругленными углами (с act-native-svg ), например: 

import React from 'react';
import {StyleSheet}  from 'react-native';
import {Path, Svg, Rect, Defs, ClipPath} from 'react-native-svg';

const SharkFinShape = (props) => {

  const sharkFinShape = 'M260.8,158.7c-50.2,0-98.5-103.7-142-103.7-17.4,0,19.7,103.7-40.7,103.7H0V0H260.8Z';

  const style = StyleSheet.create({
    svg: {
      borderRadius: 15,
      backgroundColor: "orange"
    }
  });

  return (
    <Svg viewBox="0 0 260 150" style={style.svg}>
      <Defs>
        <ClipPath id="rect-with-round-corners-clip">
          <Rect x="0" y="0" width="260" height="150" rx="15" />          
        </ClipPath>
      </Defs>
      <Path fill="red" d={sharkFinShape} clipPath="url(#rect-with-round-corners-clip)" />
    </Svg>
  );
};

export default SharkFinShape;

Результат: enter image description here

Нам нужно, чтобы эта форма заполнила всю область SVG, но если поставить preserveAspectRatio, это искажает закругленные углы "Path Path": 

<Svg preserveAspectRatio="none" viewBox="0 0 260 150" style={style.svg}>
   <Defs>
     <ClipPath id="rect-with-round-corners-clip">
       <Rect x="0" y="0" width="260" height="150" rx="15" />          
     </ClipPath>
   </Defs>
   <Path fill="red" d={sharkFinShape} clipPath="url(#rect-with-round-corners-clip)" />
</Svg>

PLEASE ZOOM IT! Увеличьте масштаб!

Это похоже на то, что он также сплющил "Путь обрезки". Мы знаем, что все находится внутри SVG, но есть ли способ сохранить аспект «Путь обрезки»?

Есть ли другой способ сделать это?

...