反應js - 使用svg線性漸變不起作用

我有一個圓圈和一個斜紋填充它，我放入漸變並通過樣式填充調用他的路徑。反應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>

它不工作，有什麼建議嗎？

來源

2016-06-22 hod caspi

漸變顏色變化與形狀不在同一位置。 –

你是什麼意思？ @RobertLongson –

漸變覆蓋由gradientTransform轉換的由x1，x2，y1和y2定義的區域。該區域不包括形狀的邊界框。 –

在

反應線性梯度的屬性形式有點不同勢和應該是這樣的：

<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="14%" stopColor="#2f343b" stopOpacity="0%"/> 
     <stop offset="43%" stopColor="#337082" stopOpacity="41%"/> 
     <stop offset="67%" stopColor="#369fb9" stopOpacity="73%"/> 
     <stop offset="79%" stopColor="#37b1cf" stopOpacity="85%"/>  </linearGradient>

其意味着該語法應該是從停止色=> stopColor

偏移應以百分比計

ReactJs + svg

來源

2016-06-26 09:51:12

反應js - 使用svg線性漸變不起作用

回答

相關問題