Svg 反应本机

Question

我正在尝试在 react native 中获得一个 svg 复选标记，但我不明白为什么我得到一个不同的 svg。我想知道问题是否与 svg 的路径有关，因为我认为其他部分对此无能为力

import React, {useEffect } from 'react'
import Animated, { Easing, useSharedValue, useAnimatedProps, withTiming, interpolateColor } from 'react-native-reanimated'
import Svg , {Path , Defs , ClipPath ,G } from 'react-native-svg'
import AniamtedStroke from './animated-stroke'
const MARGIN = 10
const vWidth = 64 + MARGIN
const vHeight = 64 + MARGIN

const checkMarkPath = 'M15 31.1977C23.1081 36.4884 29.5946 43 29.5946 43C29.5946 43 37.5 25.5 69 1.5'

const outlineBoxPath =
  'M24 0.5H40C48.5809 0.5 54.4147 2.18067 58.117 5.88299C61.8193 9.58532 63.5 15.4191 63.5 24V40C63.5 48.5809 61.8193 54.4147 58.117 58.117C54.4147 61.8193 48.5809 63.5 40 63.5H24C15.4191 63.5 9.58532 61.8193 5.88299 58.117C2.18067 54.4147 0.5 48.5809 0.5 40V24C0.5 15.4191 2.18067 9.58532 5.88299 5.88299C9.58532 2.18067 15.4191 0.5 24 0.5Z'

  const AnimatedPath = Animated.createAnimatedComponent(Path)

interface Props{
    checked?: boolean
}

const AnimatedCheckbox =(props: Props) => {
    const {checked} =props
    const checkmarkColor='#000000'
    const highlightColor='#ff0000'
    const boxOutlineColor='#000000'

    const progress=useSharedValue(0)

    useEffect(()=>{
        progress.value=withTiming(checked ? 1 : 0,
            {
                duration: checked ? 300 : 100,
                easing: Easing.linear
            })
    },[checked])

    const animatedBoxProps = useAnimatedProps(
      () => ({
        stroke: interpolateColor(
          Easing.bezier(0.16, 1, 0.3, 1)(progress.value),
          [0, 1],
          [boxOutlineColor, highlightColor],
          'RGB'
        ),
        fill: interpolateColor(
          Easing.bezier(0.16, 1, 0.3, 1)(progress.value),
          [0, 1],
          ['#00000000', highlightColor],
          'RGB'
        )
      }),
      [highlightColor, boxOutlineColor]
    )
      
 return(
    <Svg viewBox={[-MARGIN, -MARGIN, vWidth + MARGIN, vHeight + MARGIN].join(' ')}>
      <Defs>
        <ClipPath id="clipPath">
          <Path
            fill="white"
            stroke="gray"
            strokeLinejoin="round"
            strokeLinecap="round"
            d={outlineBoxPath}
          />
        </ClipPath>
      </Defs>
      <AnimatedPath
        d={outlineBoxPath}
        strokeWidth={7}
        strokeLinejoin="round"
        strokeLinecap="round"
        animatedProps={animatedBoxProps}
      />

<G clipPath="url(#clipPath)">
      <AniamtedStroke progress={progress} d={checkMarkPath} stroke={checkmarkColor} strokeWidth={10} strokeLinejoin="round" strokeLinecap="round" strokeOpacity={checked || false ? 1 : 0 } />
   </G>
    </Svg>
 )
}

export default AnimatedCheckbox

ù

this is the svg that I'm getting

this is what I want

Answer 1

问题与样式有关。我 rendered the SVG within a codepen 并且能够复制你想要的图像。

您需要设置 fill:none，因为您收到的 SVG 填充在复选标记的角之间

{
 fill:none; 
 stroke:#2d2c2a;
}

Svg 反应本机

Svg React Native

svg

reactjs

react-native