Question

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

我尝试过CSS：hover和onMouseOver事件，但都没有用。

任何线索都值得赞赏

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>

Answer 1

如果必须为每个正方形着色，则必须在每个单元格的#include <fstream> #include <string> #include <limits> String getItem() { std::ifstream stream("data.txt"); //stream.ignore(1, '\n'); stream.ignore(std::numeric_limits<streamsize>::max(), '\n'); std::string line; std::getline(stream, line); return line.c_str(); // or: return String(line.c_str(), line.size()); }中使用类.cell：

<use />

现在您可以使用CSS样式：

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

摘要：

.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;
}

在悬停时反应SVG样式元素

1 个答案: