svg 图标在网页上锯齿状明显

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 104 天前的主题，其中的信息可能已经有所发展或是发生改变。

一直以为矢量图是很平滑的，没想到放在网页中，锯齿感明显。请问是什么原因？如何修复？

import React from 'react';

interface VoiceIconProps {
  color?: string;
  className?: string;
  size?: number | string;
}

const VoiceIcon: React.FC<VoiceIconProps> = ({ 
  color = '#000000', 
  className = '',
  size = 24
}) => {
  return (
    <svg 
      xmlns="http://www.w3.org/2000/svg" 
      width={size} 
      height={size} 
      viewBox="0 0 24 24"
      className={className}
      style={{ color }}
    >
      <style>
        {`
          .audio-arc {
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
          }
          
          #inner {
            stroke: none;
          }
        `}
      </style>
      
      <g transform="translate(6, 12) rotate(-45)">
        <path id="inner" d="M0,0 L3,0 A3,3 0 0 1 0,3 Z" fill={color}/>
        <path id="middle" className="audio-arc" d="M6,0 A6,6 0 0 1 0,6" stroke={color} />
        <path id="outer" className="audio-arc" d="M9.5,0 A9.5,9.5 0 0 1 0,9.5" stroke={color}/>
      </g>
    </svg>
  );
};

export default VoiceIcon;

锯齿状

矢量图

网页

2 条回复

i8k

104 天前

唉，解决办法就是画精细一点：
```javascript
import React from 'react';

interface VoiceIconProps {
color?: string;
className?: string;
size?: number | string;
}

const VoiceIcon: React.FC<VoiceIconProps> = ({
color = '#000000',
className = '',
size = 24
}) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size}
height={size}
viewBox="0 0 100 100"
className={className}
style={{ color }}
>

<path className='audio-arc' d="M 58.250 17.033 C 56.462 18.649, 55 20.256, 55 20.604 C 55 20.952, 56.417 22.850, 58.149 24.822 C 59.881 26.795, 62.468 30.904, 63.899 33.954 C 66.183 38.824, 66.500 40.779, 66.500 50 C 66.500 59.221, 66.183 61.176, 63.899 66.046 C 62.468 69.096, 59.881 73.205, 58.149 75.178 C 56.417 77.150, 55.032 79.155, 55.072 79.632 C 55.112 80.109, 56.634 81.735, 58.454 83.245 L 61.764 85.991 65.841 80.707 C 74.635 69.308, 78.355 55.669, 76.195 42.750 C 74.831 34.593, 69.735 23.485, 64.747 17.797 L 61.500 14.094 58.250 17.033" stroke="none" fill={color} fill-rule="evenodd"/>

<path className='audio-arc' d="M 44.030 30.469 C 40.923 33.675, 40.776 34.099, 42.205 35.728 C 49.040 43.520, 49.032 56.491, 42.187 64.291 C 40.734 65.947, 40.882 66.348, 44.141 69.607 L 47.665 73.132 51.239 67.816 C 55.988 60.751, 57.293 56.161, 56.830 48.159 C 56.429 41.250, 53.996 34.978, 49.682 29.741 L 47.410 26.982 44.030 30.469" stroke="none" fill={color} fill-rule="evenodd"/>

<path id="inner" d="M 28 45.500 L 23.584 50 28 54.500 C 30.429 56.975, 32.961 59, 33.626 59 C 34.290 59, 35.608 56.975, 36.553 54.500 C 38.178 50.246, 38.178 49.754, 36.553 45.500 C 35.608 43.025, 34.290 41, 33.626 41 C 32.961 41, 30.429 43.025, 28 45.500" stroke="none" fill={color} fill-rule="evenodd"/>
</svg>
);
};

export default VoiceIcon;
```

i8k

104 天前

不用 stroke color ，用 fill color 会好一些