React Native 我怎样才能使图像具有SVG路径完整形状大小？

fhity93d 于 2022-12-14 发布在 React

关注(0)|答案(1)|浏览(120)

我试图用每个球员的图像（动态图像）填充帧形状（SVG路径）

<Svg
      xmlns='http://www.w3.org/2000/svg'
      width={182.545}
      style={{}}
      height={221.987}
      {...props}
    >
      <Pattern
        id='c'
        height='100%'
        width='100%'
        patternTransform='matrix(1,0,0,1,0,0)'
        patternContentUnits='objectBoundingBox'
        preserveAspectRatio='none'
        x='0'
        y='0'
      >
        <Image
          height='1'
          width='1'
          preserveAspectRatio='none'
          xlinkHref={'http://46.101.9.156/assets/media/users/blank.png}
          x='0'
          y='0'
        />
      </Pattern>
      <Path
        d='m142.3 167.829-46.765 10.433a12.946 12.946 0 0 1-11.384 0l-46.765-10.433a24.87 24.87 0 0 1-13.585-22.495V61.343c0-10.424 7.947-18.875 17.749-18.875l43.284-7.523a29.222 29.222 0 0 1 10.018 0l43.283 7.524c9.8 0 17.749 8.451 17.749 18.875v83.99a24.871 24.871 0 0 1-13.584 22.495Z'
        stroke='#623bcc'
        strokeMiterlimit={10}
        strokeWidth={5}
        fill='url(#c)'
      />
    </Svg>

但我得到的却是

你能不能帮我把里面的图片或者用svg的术语填充进去，这样就可以真正的填充这个形状，而不是重复或者把自己排列在一边？

react-native

来源：https://stackoverflow.com/questions/74701877/how-can-i-make-image-take-full-shape-size-of-svg-path

1条答案

按热度按时间

az31mfrm1#

最后起作用的是向包含填充图像的模式添加一个属性patternUnits='userSpaceOnUse'，因此我的代码现在是：

import Svg, {
  Path,
  Pattern,
  Image,
  Defs,
  ClipPath,
  Use
} from 'react-native-svg'
import RN from 'react-native'
const FrameSVG = props => {
  return (
    <Svg
      xmlns='http://www.w3.org/2000/svg'
      width={182.545}
      style={{ justifyContent: 'center', alignItems: 'center' }}
      height={221.987}
      {...props}
    >
      <Pattern
        id='c'
        height='100%'
        width='100%'
        patternUnits='userSpaceOnUse'
        patternContentUnits='objectBoundingBox'
        preserveAspectRatio='none'
        x='0'
        y='0'
      >
        <Image
          height='1'
          width='1'
          preserveAspectRatio='xMidYMid slice'
          xlinkHref={props.img}
          x='0'
          y='0'
        />
      </Pattern>
      <Path
        d='m142.3 167.829-46.765 10.433a12.946 12.946 0 0 1-11.384 0l-46.765-10.433a24.87 24.87 0 0 1-13.585-22.495V61.343c0-10.424 7.947-18.875 17.749-18.875l43.284-7.523a29.222 29.222 0 0 1 10.018 0l43.283 7.524c9.8 0 17.749 8.451 17.749 18.875v83.99a24.871 24.871 0 0 1-13.584 22.495Z'
        stroke='#623bcc'
        strokeMiterlimit={10}
        strokeWidth={5}
        fill='url(#c)'
      />
    </Svg>
  )
}
export default FrameSVG

我希望这对任何面临同样问题的人都有帮助

赞(0）回复(0）举报 2022-12-14

我来回答

React Native 我怎样才能使图像具有SVG路径完整形状大小？

1条答案

相关问题

热门标签

最新问答