Question

我有一个SVG图标，我们可以使用它，以便用户可以向我们的服务添加评论。通常，用户单击该图标，就会触发onClick事件，并且一切正常。除om firefox之外，此行为在所有浏览器上都是一致的，除了在单击SVG分级时不会触发onClick的

。

我尝试过将onClick放在SVG标签和g标签上，并且它在Safari，Chrome和Opera上都可以正常工作，但在Firefox上却不起作用。

const Rating = ({ color, onclick, ...props }) => (
  <svg id="Layer_1" viewBox="0 0 80 80" {...props}>
    <g className="st0" onClick={onclick}>
      <path className="st1" d="M0 0h80v80H0z" />
    </g>
    <path
      className={color}
      /* eslint max-len: ["error", 500] */
      d="M22.9 67.6c-.6 0-1.2-.2-1.8-.6-.9-.7-1.4-1.8-1.2-2.9l3-17.5-12.7-12.4c-.8-.8-1.1-2-.8-3.1.4-1.1 1.3-1.9 2.4-2l17.5-2.5 7.8-15.9c1-2 4.4-2 5.4 0l7.8 15.9L68 29.1c1.1.2 2.1 1 2.4 2s.1 2.3-.8 3.1L57 46.6 60 64c.2 1.1-.3 2.3-1.2 2.9-.9.7-2.1.8-3.2.2L40 59l-15.7 8.2c-.5.2-.9.4-1.4.4zm17.1-15c.5 0 1 .1 1.4.3L53.1 59l-2.2-13c-.2-1 .2-2 .9-2.7l9.5-9.2-13.1-1.9c-1-.1-1.8-.8-2.3-1.6L40 18.8l-5.8 11.9c-.4.9-1.3 1.5-2.3 1.6l-13.1 1.9 9.5 9.2c.7.7 1 1.7.9 2.7l-2.2 13L38.7 53c.3-.3.8-.4 1.3-.4z"
    />
  </svg>
)

Rating.propTypes = {
    color: PropTypes.string,
}

export default Rating

  <Rating
  key={_.uniqueId(i)}
  className="star-rating__star"
  onClick={() => this.rate(i)}
  viewBox="0 0 90 90"
  />

我希望在单击SVG时会触发onClick事件，就像在其他所有主要浏览器中一样。

更新：在检查元素中进行了一些调试之后，我发现星星不会变为可单击状态，因为在一个上下文中，即使按钮没有任何单击事件，它们也会呈现在按钮内部。

在除Firefox之外的所有浏览器上均可单击SVG图标

0 个答案: