时间戳

首页 > 解决方案 > 在悬停时反应 SVG 样式元素

javascript - 在悬停时反应 SVG 样式元素

问题描述

我在基于 SVG 的 React 组件中有一个正方形数组，我需要在悬停时将自定义样式（fill颜色设置为purple）应用于光标下的正方形。

我用 CSS :hover 和onMouseOverevents 都试过了，都没有用。

非常感谢任何线索

const { render } = ReactDOM,
      rootNode = document.getElementById('root')
      
const Matrix = ({m, n}) => (
    <svg 
      viewBox={`0 0 ${m*10+10} ${n*10+10}`} xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
          <rect 
            id="cell" 
            width="5" 
            height="5"
            className="cell"
            onMouseOver={({target}) => target.style.cssText="fill:purple"}
          />
      </defs>
      <g>
        {
          Array(n).fill().map((row, rowIdx) => (
            <g key={rowIdx}>
              {
                Array(m).fill().map((col, colIdx) => (
                    <g key={colIdx}>
                      <use 
                        x={5+colIdx*5} 
                        y={5+rowIdx*5} 
                        xlinkHref="#cell"
                        fill="lightgray"
                        stroke="white"
                        strokeWidth=".4" 
                      />
                    </g>
                ))
              }
            </g>
          ))
        }
      </g>
  </svg>
)

render (
  <Matrix m={10} n={10} />,
  rootNode
)
#cell:hover {
  fill: purple;
}

.cell:hover {
  fill: purple;
}
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script></script><div id="root"></div>

标签： javascripthtmlcssreactjssvg

解决方案

如果您必须为每个正方形着色，则必须.cell在<use />每个单元格中使用您的类：

<use 
 className="cell"
 x={5+colIdx*5} 
 y={5+rowIdx*5} 
 xlinkHref="#cell"
 fill="grey"
 stroke="white"
 strokeWidth=".4" 
/>

现在您可以使用您的 css 样式：

.cell:hover {
  fill: purple;
}

片段：

const { render } = ReactDOM,
      rootNode = document.getElementById('root')
      
const Matrix = ({m, n}) => (
    <svg 
      viewBox={`0 0 ${m*10+10} ${n*10+10}`} xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
          <rect 
            id="cell" 
            width="5" 
            height="5"
          />
      </defs>
      <g>
        {
          Array(n).fill().map((row, rowIdx) => (
            <g key={rowIdx}>
              {
                Array(m).fill().map((col, colIdx) => (
                    <g key={colIdx}>
                      <use 
                        className="cell"
                        x={5+colIdx*5} 
                        y={5+rowIdx*5} 
                        xlinkHref="#cell"
                        fill="grey"
                        stroke="white"
                        strokeWidth=".4" 
                      />
                    </g>
                ))
              }
            </g>
          ))
        }
      </g>
  </svg>
)

render (
  <Matrix m={10} n={10} />,
  rootNode
)
.cell:hover {
  fill: purple;
}
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script></script><div id="root"></div>

推荐阅读