用在SVG元素上的pointer-events属性值测试实例页面

展示

代码

• HTML：

  <h4 class="fill">visiblePainted</h4>
  <svg class="visible-painted" viewBox="0 0 100 100">
      <ellipse cx="50" cy="50" rx="60" ry="20"></ellipse>
      <rect x="30" y="10" width="40" height="80" rx="10" ry="10"></rect>
  </svg>
  <svg class="visible-painted" viewBox="0 0 100 100">
      <ellipse cx="50" cy="50" rx="60" ry="20" fill="none"></ellipse>
      <rect x="30" y="10" width="40" height="80" rx="10" ry="10" stroke="none"></rect>
  </svg>
  <svg class="visible-painted" viewBox="0 0 100 100">
      <ellipse cx="50" cy="50" rx="60" ry="20"></ellipse>
      <rect x="30" y="10" width="40" height="80" rx="10" ry="10" style="visibility: hidden;"></rect>
  </svg>
  
  ...

• CSS：

  svg {
      width: 120px; height: 100px;
      fill: deepskyblue;
      stroke: deeppink;
      stroke-width: 10px;
      border: 1px solid;
  }
  svg:hover {
      background-color: #f0f3f9;
  }
  ellipse,
  rect {
      cursor: pointer;
  }
  ellipse:hover,
  rect:hover，
  ellipse:active,
  rect:active {
      fill: gray;
      stroke: darkgray;
      visibility: visible !important;
  }
  
  .visible-painted {
      pointer-events: visiblePainted;
  }
  .visible-fill {
      pointer-events: visibleFill;
  }
  .visible-stroke {
      pointer-events: visibleStroke;
  }
  .visible {
      pointer-events: visible;
  }
  .painted {
      pointer-events: painted;
  }
  .pe-fill {
      pointer-events: fill;
  }
  .pe-stroke {
      pointer-events: stroke;
  }
  .pe-all {
      pointer-events: all;
  }