WebKit에서 SVG 그라데이션을 'fill-opacity'를 가진 요소에 적용하면 색감이 흐트러집니다.

WebKit(Mac판의 Safari 포함)에서는 fill-opacity 를 설정한 요소에 SVG 그라데이션을 적용하면 색미가 흩어져 버립니다.
SVG 그라데이션을 투명화하는 경우에는 stop-opacity 를 사용하거나, 칠과 선의 패스를 나눈 다음에 칠의 패스에 opacity 를 설정할 필요가 있을 것 같습니다.
덧붙여 iOS판 Safari에서는 문제없는 것 같다(왜다).

현상 확인용 데모

다음과 같은 SVG에서 현상이 발생합니다.

<svg viewBox="0 0 300 200">
  <defs>
    <linearGradient id="g0">
      <stop offset="0%" stop-color="red"></stop>
      <stop offset="50%" stop-color="green"></stop>
      <stop offset="100%" stop-color="blue"></stop>
    </linearGradient>
  </defs>
  <circle cx="50%" cy="50%" r="33%" fill="url(#g0)" fill-opacity=".67"></circle>
</svg>

데모 URL: htps : // 코데펜. 이오/하리보테/펜/B레jKV? 에아와 rs=1100#0

↑는 데모를 Safari에서 열린 캡처입니다.
알 수 있었을까 ...?
방법은 다르지만 모두 같은 투명도를 지정하고 있음에도 불구하고 fill-opacity 를 설정하고 있는 패턴만 색미가 흩어져 버리고 있습니다.
덧붙여서 SVG의 <linearGradient /> 이나 <radialGradient /> 에는 color-interpolation 속성으로 색 공간을 지정할 수 있습니다만 명시적으로 sRGB 를 지정해도 안 되었습니다.

대응 방법 여러가지

stop-opacity 사용

<svg viewBox="0 0 300 200">
  <defs>
    <linearGradient id="g1">
      <stop offset="0%" stop-color="red" stop-opacity=".67"></stop>
      <stop offset="50%" stop-color="green" stop-opacity=".67"></stop>
      <stop offset="100%" stop-color="blue" stop-opacity=".67"></stop>
    </linearGradient>
  </defs>
  <circle cx="50%" cy="50%" r="33%" fill="url(#g1)"></circle>
</svg>

그라데이션을 적용하는 요소에 투명도를 지정하는 대신 그라데이션 정의 측에 투명도를 지정합니다.
정의한 그라데이션의 사용법이 모든 적용 요소에 있어서 동일하다면 이 방법으로도 좋을 것 같습니다.
그러나, stop-opacity 는 본래, 투명도의 그라데이션을 설정하기 위한 속성·스타일 (불투명으로부터 투명하게 하고 싶은, 등)입니다.
그래서 요소 별 채우기의 투명도와 그라데이션 정의 자체의 투명도는 역시 따로 설정하고 싶다고 하는 경우가 아마 많아, 그러한 경우에 이 방법을 이용할 수 없습니다.

opacity 사용

<svg viewBox="0 0 300 200">
  <defs>
    <linearGradient id="g2">
      <stop offset="0%" stop-color="red"></stop>
      <stop offset="50%" stop-color="green"></stop>
      <stop offset="100%" stop-color="blue"></stop>
    </linearGradient>
  </defs>
  <circle cx="50%" cy="50%" r="33%" fill="url(#g2)" stroke="none" opacity=".67"></circle><!-- 塗りを適用するパス -->
  <circle cx="50%" cy="50%" r="33%" fill="none"></circle><!-- 線を適用するパス -->
</svg>

다음으로 생각할 수 있는 것이 그라데이션을 적용하는 요소에 opacity 를 설정하는 방법입니다.
다만 opacity 는 요소 통째로, 즉 칠도 선도 함께 함에 투명화해 버립니다.
따라서 채우기에 대해서만 투명도를 지정하고 싶은 경우는, 상기 코드와 같이 채우기를 적용하는 패스와 선을 적용하는 패스를 나누어 써야 합니다.

그래, 사실은 그렇게 하지 않아도 좋다.