Question

我试图理解为什么周围的SVG元素（如-<g>，<rect>，<circle>和<div>）不起作用。

我正在创建交互式可视化。在此可视化中，我将<circle>包裹在<g>中。使用react-contextmenu npm添加上下文菜单时，它将在<div>周围添加<g>元素，并且没有输出。

为重现此问题，我使用了MDN示例。以下代码按预期显示了2个圆圈-

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <!-- Using g to inherit presentation attributes -->
    <g fill="white" stroke="green" stroke-width="5">
        <circle cx="40" cy="40" r="25" />
        <circle cx="60" cy="60" r="25" />
    </g>
</svg>

JSFiddle-https://jsfiddle.net/phfj3a2u/

如果用<g>包围<div>，我会看到空白屏幕。

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <div>
        <g fill="white" stroke="green" stroke-width="5">
            <circle cx="40" cy="40" r="25" />
            <circle cx="60" cy="60" r="25" />
        </g>
    </div>
</svg>

JSFiddle-https://jsfiddle.net/5m2at4bw/

编辑：添加一个示例来说明对<div>

的需求

//index.js
import React          from 'react';
import ReactDOM       from 'react-dom';
import App            from './components/App.js';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

//components/App.js
import React from 'react';
import {
  ContextMenu,
  MenuItem,
  ContextMenuTrigger } from 'react-contextmenu';

export default class App extends React.PureComponent {

  constructor(props) {
    super(props);
  }

  handleClick(e, data) {
    console.log(data.circleId);
  }

  render() {
    return (
      <>
        <svg viewBox="0 0 100 100">
          <g fill="white" stroke="green" strokeWidth="5">
            <ContextMenuTrigger id = "firstCircle">
              <circle cx="10" cy="10" r="5" />
            </ContextMenuTrigger>

            <ContextMenu id = "firstCircle">
              <MenuItem data = {{circleId : 1 }} onClick = {this.handleClick}>
                ContextMenu Item 1
              </MenuItem>
              <MenuItem data = {{circleId : 1 }} onClick = {this.handleClick}>
                ContextMenu Item 2
              </MenuItem>
            </ContextMenu>

            <ContextMenuTrigger id = "secondCircle">
              <circle cx="10" cy="30" r="5" />
            </ContextMenuTrigger>

            <ContextMenu id = "secondCircle">
              <MenuItem data = {{circleId : 2 }} onClick = {this.handleClick}>
                ContextMenu Item 1
              </MenuItem>
              <MenuItem data = {{circleId : 2 }} onClick = {this.handleClick}>
                ContextMenu Item 2
              </MenuItem>
            </ContextMenu>
          </g>
        </svg>
      </>
    );
  }
}

react生成应用程序时，<svg>元素类似于-

<svg viewBox="0 0 100 100">
  <g fill="white" stroke="green" stroke-width="5">
  <div class="react-contextmenu-wrapper">
    <circle cx="10" cy="10" r="5">
    </circle>
  </div>

  <nav role="menu" tabindex="-1" class="react-contextmenu" style="position: fixed; opacity: 0; pointer-events: none;">
    <div class="react-contextmenu-item" role="menuitem" tabindex="-1" aria-disabled="false">ContextMenu Item 1</div>
    <div class="react-contextmenu-item" role="menuitem" tabindex="-1" aria-disabled="false">ContextMenu Item 2</div>
  </nav>

  <div class="react-contextmenu-wrapper">
    <circle cx="10" cy="30" r="5">
    </circle>
  </div>
  <nav role="menu" tabindex="-1" class="react-contextmenu" style="position: fixed; opacity: 0; pointer-events: none;">
    <div class="react-contextmenu-item" role="menuitem" tabindex="-1" aria-disabled="false">ContextMenu Item 1</div>
    <div class="react-contextmenu-item" role="menuitem" tabindex="-1" aria-disabled="false">ContextMenu Item 2</div>
  </nav>
  </g>
</svg>

请注意<div>周围有<circle>。这将导致黑屏。现在，我知道为什么会这样。我正在寻找有关解决方法的建议。

如何将SVG <g>元素包装在<div>中？

0 个答案: