我有一個勾號圖示，我正在嘗試創建一個圓形背景填充它。如何正確創建一個邊框半徑是 svg 圖示大小的一半？我嘗試過使用邊框半徑：50%，這在 React Native 中不起作用，并且還嘗試將道具的寬度和高度除以 2，但我認為我這樣做不正確。
它目前看起來像這樣：
import React from 'react';
import Svg, { Path } from 'react-native-svg';
import styled from 'styled-components/native';
const TickIcon = ({ width = 16, height = 13 }) => (
<Container>
<Svg
xmlns="http://www.w3.org/2000/svg"
overflow="visible"
preserveAspectRatio="none"
width={width}
height={height}>
<Path
d="M14.2 0L5.882 8.986 2 4.821 0 6.904 5.682 13 16 1.931 14.2 0z"
vectorEffect="non-scaling-stroke"
fill="#fff"
// fill="#d41f3a"
/>
</Svg>
</Container>
);
export default TickIcon;
const Container = styled.View`
align-self: flex-start;
/* width: ${props => props.width / 2}; */
/* height: ${props => props.height / 2}; */
/* border-radius: 50%; */
padding: 5px;
justify-content: center;
align-items: center;
background-color: #d41f3a;
`;
uj5u.com熱心網友回復：
<circle>在 . 之前添加一個元素<path>。將其半徑 ( r) 設定為高度 / 2、cx寬度 / 2、cy高度 / 2：
<svg width="16" height="16">
<circle r="8" cx="8" cy="8" fill="red" />
<path d="M14.2 0L5.882 8.986 2 4.821 0 6.904 5.682 13 16 1.931 14.2 0z" fill="#fff" />
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/416682.html
標籤：
上一篇：用影像填充100%的SVG路徑