3
나는 서클과 그라디언트로 채우기 위해 그라디언트에 넣고 스타일 채우기로 경로에서 호출합니다.반응 js - 사용 svg 선형 그래디언트가 작동하지 않음
import React,{PropTyoes} from 'react';
import {connect} from 'react-redux';
import * as Actions from '../controllers/Actions';
export default class MyComp extends React.Component {
constructor(props, context){
super(props, context);
}
render(){
return (
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 983.4 983.4">
<g>
<linearGradient id="linear-gradient" gradientUnits="userSpaceOnUse" x1="1041.6901" y1="169.485" x2="1383.9301" y2="169.485" gradientTransform="matrix(1 0 0 -1 -761.14 398.97)">
<stop offset="0.14" stop-color="#2f343b" stop-opacity="0"/>
<stop offset="0.43" stop-color="#337082" stop-opacity="0.41"/>
<stop offset="0.67" stop-color="#369fb9" stop-opacity="0.73"/>
<stop offset="0.79" stop-color="#37b1cf" stop-opacity="0.85"/>
</linearGradient>
<path id="gradient" style={{fill:'url(#linear-gradient)'}} className="cls-200" d="M622.8,119.6C512.1,72,385.5,78.9,280.6,138.1l134.3,232.6c31.2-16.8,68.2-18.5,100.9-4.8 L622.8,119.6z">
</g>
</svg>
아무런 제안이 없습니다. 에
그라디언트 색상이 모양과 동일한 위치에 있지 않습니다. –
무엇을 의미합니까? @RobertLongson –
그라디언트는 gradientTransform으로 변환 된 x1, x2, y1 및 y2로 정의 된 영역을 포함합니다. 그 영역은 도형의 경계 상자를 덮지 않습니다. –