堆栈内存溢出
  简体   繁体   English

如何检查鼠标指针事件是否在掩码内？

[英]How to check a mouse pointer event is within a mask?

 原文  2022-12-26 23:58:42  9   1    javascript/ html/ css/ mouseevent

问题描述

在此处输入图像描述

I need to highlight a puzzle piece on mouse hover. Each puzzle is a div, masked by an SVG. I figured out how to determine a mask bounding rectangle and check within it, but I can't figure out how to check events within complex SVG shape (Codepen — https://codepen.io/alexchekanov/pen/Yzjymgq):我需要在鼠标 hover 上突出显示一块拼图。每个拼图都是一个 div，由 SVG 掩盖。我想出了如何确定一个蒙版边界矩形并在其中检查，但我无法弄清楚如何检查复杂事件中的事件SVG 形状（Codepen — https://codepen.io/alexchekanov/pen/Yzjymgq）：

<style>
  .tt-puzzle-container {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 500px;
    height: 500px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    pointer-events: auto; /* added */
  }

  .tt-puzzle-piece {
    position: absolute;
    width: 100%;
    height: 50%;
    padding-right: 0px;
    padding-bottom: 0px;
    background-color: #ff0606;
    -webkit-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transition: background-color 200ms ease;
    transition: background-color 200ms ease;
  }

  .tt-puzzle-piece:hover {
    background-color: #50ff06;
  }

  .tt-puzzle-piece._2 {
    z-index: 10;
    -webkit-transform: rotate(72deg);
    -ms-transform: rotate(72deg);
    transform: rotate(72deg);
    mask: var(--mask-url);
  }

  .tt-puzzle-piece._3 {
    z-index: 20;
    -webkit-transform: rotate(144deg);
    -ms-transform: rotate(144deg);
    transform: rotate(144deg);
    mask: var(--mask-url);
  }

  .tt-puzzle-piece._4 {
    z-index: 30;
    -webkit-transform: rotate(216deg);
    -ms-transform: rotate(216deg);
    transform: rotate(216deg);
    mask: var(--mask-url);
  }

  .tt-puzzle-piece._5 {
    z-index: 40;
    -webkit-transform: rotate(288deg);
    -ms-transform: rotate(288deg);
    transform: rotate(288deg);
    mask: var(--mask-url);
  }
</style>
<body>
  <div class="tt-puzzle-container">
    <div class="w-embed">
      <style>
        :root {
          --mask-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 238.5 209.5"><path d="M0.3,170.6c-0.5,0.7-0.3,1.6,0.4,2.1c14.8,10.1,30.8,18.3,47.5,24.3c0,0,0.1,0,0.1,0.1c1.1,0.4,2.1,0.8,3.2,1.1c0.3,0.1,0.6,0.2,0.9,0.3c0.9,0.3,1.8,0.6,2.7,0.9c0.6,0.2,1.1,0.4,1.7,0.5c0.7,0.2,1.3,0.4,2,0.6c1.3,0.4,2.6,0.8,3.8,1.1c1.4,0.4,2.8,0.8,4.2,1.1c0.5,0.1,1,0.2,1.5,0.4c0.5,0.1,1.1,0.3,1.6,0.4c0.5,0.1,1.1,0.3,1.6,0.4c1.6,0.4,3.2,0.7,4.8,1.1c0.5,0.1,1.1,0.2,1.6,0.3c1.1,0.2,2.2,0.4,3.2,0.6c0.5,0.1,1.1,0.2,1.6,0.3c1.1,0.2,2.2,0.4,3.3,0.6c0.6,0.1,1.1,0.2,1.6,0.3c1.6,0.2,3.2,0.5,4.8,0.7c0.6,0.1,1.2,0.2,1.8,0.2c0.4,0.1,0.8,0.1,1.3,0.1c0.4,0.1,0.9,0.1,1.3,0.1c0.7,0.1,1.3,0.1,1.9,0.2c0.2,0,0.4,0,0.6,0.1c30,2.8,60-0.9,87.9-10.5c12.1-4.1,23.7-9.4,34.9-15.7c3.5-2,6.9-4,10.3-6.2c1.8-1.1,3.5-2.3,5.3-3.5c0.7-0.5,0.9-1.4,0.4-2.1l-25.1-34.6c-0.8-1.1-2.5-1.1-3.2,0.1c-1.2,2-2.8,3.8-4.8,5.2c-0.8,0.5-1.6,1-2.4,1.5c-7.6,3.9-16.9,1.8-22.1-4.9c-3-3.8-4.2-8.6-3.6-13.4c0.7-4.8,3.2-9,7.1-11.9c2-1.4,4.1-2.4,6.4-2.9c1.3-0.3,1.9-1.9,1.1-3l-29.4-40.4c-0.5-0.6-1.3-0.8-2-0.4c0,0,0,0,0,0c-0.5,0.3-0.9,0.6-1.4,0.9c-0.4,0.2-0.8,0.4-1.1,0.7c-0.8,0.5-1.6,0.9-2.4,1.3c-0.3,0.1-0.5,0.3-0.8,0.4c-9.7,5-20.4,7.8-31.2,8.4c-0.3,0-0.6,0-0.9,0.1c-1,0-2,0.1-2.9,0.1c-0.4,0-0.9,0-1.3,0c-13.7-0.2-27.4-3.9-39.7-11.5c0,0-0.1,0-0.1,0c-0.1-0.1-0.3-0.2-0.4-0.2c-0.8,0.2-1.2,0.2-2,0.4l-34.5,47.5c-1.5,2.1-4.2,2.8-6.5,2c-0.5-0.2-1-0.4-1.4-0.8c-1.6-1.2-2.5-3.4-2.3-5.9c0-0.2,0-0.4-0.1-0.7c-3.4-9.2-14.2-9.1-18-2.1c-1.9,3.4-1.4,7.7,1.1,10.7c2.5,2.9,6.2,4.1,9.8,3.2c1.9-0.5,3.9-0.2,5.2,0.8c0.5,0.3,0.8,0.7,1.2,1.1c1.5,1.9,1.6,4.7,0.1,6.8L0.3,170.6z"/></svg>');
        }
        .tt-puzzle-piece {
          -webkit-mask: var(--mask-url) center/contain no-repeat;
          mask: var(--mask-url) center/contain no-repeat;
        }
      </style>
    </div>
    <div class="tt-puzzle-piece"></div>
    <div class="tt-puzzle-piece _2"></div>
    <div class="tt-puzzle-piece _3"></div>
    <div class="tt-puzzle-piece _4"></div>
    <div class="tt-puzzle-piece _5"></div>
  </div>
</body>

<script>
  const puzzleContainer = document.querySelector(".tt-puzzle-container");
  const puzzlePieces = document.querySelectorAll(".tt-puzzle-piece");

  function isEventWithinPuzzlePiece(event) {
    // Get the bounding rect of the puzzle container
    const puzzleContainerRect = puzzleContainer.getBoundingClientRect();

    // Check if the event occurred within the puzzle container rect
    return (
      event.clientX >= puzzleContainerRect.left &&
      event.clientX <= puzzleContainerRect.right &&
      event.clientY >= puzzleContainerRect.top &&
      event.clientY <= puzzleContainerRect.bottom
    );
  }

  function isEventWithinMask(event, puzzlePiece) {
    // Get the bounding rect of the mask
    const maskRect = puzzlePiece.getBoundingClientRect();

    // Check if the event occurred within the mask rect
    return (
      event.clientX >= maskRect.left &&
      event.clientX <= maskRect.right &&
      event.clientY >= maskRect.top &&
      event.clientY <= maskRect.bottom
    );
  }

  puzzleContainer.addEventListener("click", (event) => {
    // Check if the event occurred within a puzzle piece
    if (!isEventWithinPuzzlePiece(event)) {
      return;
    }

    // Get the element under the mouse
    const elementUnderMouse = document.elementFromPoint(
      event.clientX,
      event.clientY
    );
    if (!elementUnderMouse) {
      return;
    }

    // Check if the element under the mouse is a puzzle piece
    const puzzlePiece = elementUnderMouse.closest(".tt-puzzle-piece");
    if (!puzzlePiece) {
      return;
    }

    // Check if the event occurred within the mask of the puzzle piece
    if (isEventWithinMask(event, puzzlePiece)) {
      // Prevent the event from being handled
      event.stopPropagation();
    }
  });
</script>

1 个解决方案

解决方案1
 0  2022-12-27 04:01:15

Because individual <div> with a rotated SVG as background are rectangluar elements.因为带有旋转 SVG 作为背景的单个<div>是矩形元素。

  • Despite masking the outsides of the SVG, the rectangle will still overlap sibbling elements.尽管屏蔽了 SVG 的外部，矩形仍将与兄弟元素重叠。 Using a mask-image with the puzzle pieces will remove all underlaying overlaps of their sibblings, leaving you with just a few lines as final result.使用带有拼图块的mask-image将删除它们兄弟姐妹的所有底层重叠，最终结果只剩下几行。

  • Without mask-image , only small parts of the individual pieces will react to :hover , despite changing z-index .如果没有mask-image ，尽管更改了z-index ，但只有一小部分单个片段会对:hover做出反应。

I tested the above to be true in Firefox.我在 Firefox 中测试了以上内容。

Solution解决方案

  • Create an in-document SVG hidden from view with style="display: none" defining the full puzzle as a <symbol> with and id and <use> it in your <div> .创建一个隐藏在视图中的文档 SVG ，使用style="display: none"将完整的拼图定义为带有和id的<symbol>并<use>在您的<div>中。

It took me quite some time to create the final SVG and the demo, so I did not incorporate your Javascript in the snippet.我花了很多时间来创建最终的 SVG 和演示，所以我没有在代码片段中加入你的 Javascript。 However, it should give you not much trouble attaching an eventlistener to the symbol and/or the individual path in the SVG to perform the required actions on hover/click.但是，将事件侦听器附加到符号和/或eventlistener中的单个path以在悬停/单击时执行所需的操作应该不会给您带来太多麻烦。

As you can see in the snippet, the final hover action only takes two CSS rules to achieve the desired result:正如您在代码片段中看到的，最终的 hover 操作仅需要两条 CSS 规则即可达到预期结果：

.tt-puzzle-piece       { fill: red; transition: fill 0.2s ease }
.tt-puzzle-piece:hover { fill: lime }

I leave it up to you to create a single <symbol> puzzle piece in the SVG, re <use> it and rotate/translate it to the proper location saving you some code size.我让您在 SVG 中创建一个<symbol>拼图，重新<use>并将其rotate/translate到正确的位置，从而节省一些代码大小。

For now, things will work as advertised...目前，事情会像宣传的那样运作......

BTW I used SVGedit v7.0 to create the full puzzle...顺便说一句，我使用SVGedit v7.0来创建完整的拼图......

snippet片断

 /* * { outline: 1px dashed } /* for debugging */ * { box-sizing: border-box } body { margin: 0; width: 100%; min-height: 100vh; display: grid; place-items: center; }.tt-puzzle-container { width: 50vw; height: 50vw }.tt-puzzle-container > svg { width: 100%; height: 100% }.tt-puzzle-piece { fill: red; transition: fill 0.2s ease }.tt-puzzle-piece:hover { fill: lime }
 <div class="tt-puzzle-container"> <svg><use href="#puzzle-full" /></svg> </div> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: none"> <defs> <symbol id="puzzle-full" viewbox="0 0 418 417"> <path id="piece-1" class="tt-puzzle-piece" d="m90.77,377.92c-0.5,0.7 -0.3,1.6 0.4,2.1c14.8,10.1 30.8,18.3 47.5,24.3c0,0 0.1,0 0.1,0.1c1.1,0.4 2.1,0.8 3.2,1.1c0.3,0.1 0.6,0.2 0.9,0.3c0.9,0.3 1.8,0.6 2.7,0.9c0.6,0.2 1.1,0.4 1.7,0.5c0.7,0.2 1.3,0.4 2,0.6c1.3,0.4 2.6,0.8 3.8,1.1c1.4,0.4 2.8,0.8 4.2,1.1c0.5,0.1 1,0.2 1.5,0.4c0.5,0.1 1.1,0.3 1.6,0.4c0.5,0.1 1.1,0.3 1.6,0.4c1.6,0.4 3.2,0.7 4.8,1.1c0.5,0.1 1.1,0.2 1.6,0.3c1.1,0.2 2.2,0.4 3.2,0.6c0.5,0.1 1.1,0.2 1.6,0.3c1.1,0.2 2.2,0.4 3.3,0.6c0.6,0.1 1.1,0.2 1.6,0.3c1.6,0.2 3.2,0.5 4.8,0.7c0.6,0.1 1.2,0.2 1.8,0.2c0.4,0.1 0.8,0.1 1.3,0.1c0.4,0.1 0.9,0.1 1.3,0.1c0.7,0.1 1.3,0.1 1.9,0.2c0.2,0 0.4,0 0.6,0.1c30,2.8 60,-0.9 87.9,-10.5c12.1,-4.1 23.7,-9.4 34.9,-15.7c3.5,-2 6.9,-4 10.3,-6.2c1.8,-1.1 3.5,-2.3 5.3,-3.5c0.7,-0.5 0.9,-1.4 0.4,-2.1l-25.1,-34.6c-0.8,-1.1 -2.5,-1.1 -3.2,0.1c-1.2,2 -2.8,3.8 -4.8,5.2c-0.8,0.5 -1.6,1 -2.4,1.5c-7.6,3.9 -16.9,1.8 -22.1,-4.9c-3,-3.8 -4.2,-8.6 -3.6,-13.4c0.7,-4.8 3.2,-9 7.1,-11.9c2,-1.4 4.1,-2.4 6.4,-2.9c1.3,-0.3 1.9,-1.9 1.1,-3l-29.4,-40.4c-0.5,-0.6 -1.3,-0.8 -2,-0.4c0,0 0,0 0,0c-0.5,0.3 -0.9,0.6 -1.4,0.9c-0.4,0.2 -0.8,0.4 -1.1,0.7c-0.8,0.5 -1.6,0.9 -2.4,1.3c-0.3,0.1 -0.5,0.3 -0.8,0.4c-9.7,5 -20.4,7.8 -31.2,8.4c-0.3,0 -0.6,0 -0.9,0.1c-1,0 -2,0.1 -2.9,0.1c-0.4,0 -0.9,0 -1.3,0c-13.7,-0.2 -27.4,-3.9 -39.7,-11.5c0,0 -0.1,0 -0.1,0c-0.1,-0.1 -0.3,-0.2 -0.4,-0.2c-0.8,0.2 -1.2,0.2 -2,0.4l-34.5,47.5c-1.5,2.1 -4.2,2.8 -6.5,2c-0.5,-0.2 -1,-0.4 -1.4,-0.8c-1.6,-1.2 -2.5,-3.4 -2.3,-5.9c0,-0.2 0,-0.4 -0.1,-0.7c-3.4,-9.2 -14.2,-9.1 -18,-2.1c-1.9,3.4 -1.4,7.7 1.1,10.7c2.5,2.9 6.2,4.1 9.8,3.2c1.9,-0.5 3.9,-0.2 5.2,0.8c0.5,0.3 0.8,0.7 1.2,1.1c1.5,1.9 1.6,4.7 0.1,6.8l-30.2,41.6z"/> <path id="piece-2" class="tt-puzzle-piece" transform="rotate(-71.7606, 339.473, 250.323)" d="m220.57,283.42c-0.5,0.7 -0.3,1.6 0.4,2.1c14.8,10.1 30.8,18.3 47.5,24.3c0,0 0.1,0 0.1,0.1c1.1,0.4 2.1,0.8 3.2,1.1c0.3,0.1 0.6,0.2 0.9,0.3c0.9,0.3 1.8,0.6 2.7,0.9c0.6,0.2 1.1,0.4 1.7,0.5c0.7,0.2 1.3,0.4 2,0.6c1.3,0.4 2.6,0.8 3.8,1.1c1.4,0.4 2.8,0.8 4.2,1.1c0.5,0.1 1,0.2 1.5,0.4c0.5,0.1 1.1,0.3 1.6,0.4c0.5,0.1 1.1,0.3 1.6,0.4c1.6,0.4 3.2,0.7 4.8,1.1c0.5,0.1 1.1,0.2 1.6,0.3c1.1,0.2 2.2,0.4 3.2,0.6c0.5,0.1 1.1,0.2 1.6,0.3c1.1,0.2 2.2,0.4 3.3,0.6c0.6,0.1 1.1,0.2 1.6,0.3c1.6,0.2 3.2,0.5 4.8,0.7c0.6,0.1 1.2,0.2 1.8,0.2c0.4,0.1 0.8,0.1 1.3,0.1c0.4,0.1 0.9,0.1 1.3,0.1c0.7,0.1 1.3,0.1 1.9,0.2c0.2,0 0.4,0 0.6,0.1c30,2.8 60,-0.9 87.9,-10.5c12.1,-4.1 23.7,-9.4 34.9,-15.7c3.5,-2 6.9,-4 10.3,-6.2c1.8,-1.1 3.5,-2.3 5.3,-3.5c0.7,-0.5 0.9,-1.4 0.4,-2.1l-25.1,-34.6c-0.8,-1.1 -2.5,-1.1 -3.2,0.1c-1.2,2 -2.8,3.8 -4.8,5.2c-0.8,0.5 -1.6,1 -2.4,1.5c-7.6,3.9 -16.9,1.8 -22.1,-4.9c-3,-3.8 -4.2,-8.6 -3.6,-13.4c0.7,-4.8 3.2,-9 7.1,-11.9c2,-1.4 4.1,-2.4 6.4,-2.9c1.3,-0.3 1.9,-1.9 1.1,-3l-29.4,-40.4c-0.5,-0.6 -1.3,-0.8 -2,-0.4c0,0 0,0 0,0c-0.5,0.3 -0.9,0.6 -1.4,0.9c-0.4,0.2 -0.8,0.4 -1.1,0.7c-0.8,0.5 -1.6,0.9 -2.4,1.3c-0.3,0.1 -0.5,0.3 -0.8,0.4c-9.7,5 -20.4,7.8 -31.2,8.4c-0.3,0 -0.6,0 -0.9,0.1c-1,0 -2,0.1 -2.9,0.1c-0.4,0 -0.9,0 -1.3,0c-13.7,-0.2 -27.4,-3.9 -39.7,-11.5c0,0 -0.1,0 -0.1,0c-0.1,-0.1 -0.3,-0.2 -0.4,-0.2c-0.8,0.2 -1.2,0.2 -2,0.4l-34.5,47.5c-1.5,2.1 -4.2,2.8 -6.5,2c-0.5,-0.2 -1,-0.4 -1.4,-0.8c-1.6,-1.2 -2.5,-3.4 -2.3,-5.9c0,-0.2 0,-0.4 -0.1,-0.7c-3.4,-9.2 -14.2,-9.1 -18,-2.1c-1.9,3.4 -1.4,7.7 1.1,10.7c2.5,2.9 6.2,4.1 9.8,3.2c1.9,-0.5 3.9,-0.2 5.2,0.8c0.5,0.3 0.8,0.7 1.2,1.1c1.5,1.9 1.6,4.7 0.1,6.8l-30.2,41.6z"/> <path id="piece-3" class="tt-puzzle-piece" transform="rotate(-144.324, 289.473, 98.3229)" d="m170.57,131.42c-0.5,0.7 -0.3,1.6 0.4,2.1c14.8,10.1 30.8,18.3 47.5,24.3c0,0 0.1,0 0.1,0.1c1.1,0.4 2.1,0.8 3.2,1.1c0.3,0.1 0.6,0.2 0.9,0.3c0.9,0.3 1.8,0.6 2.7,0.9c0.6,0.2 1.1,0.4 1.7,0.5c0.7,0.2 1.3,0.4 2,0.6c1.3,0.4 2.6,0.8 3.8,1.1c1.4,0.4 2.8,0.8 4.2,1.1c0.5,0.1 1,0.2 1.5,0.4c0.5,0.1 1.1,0.3 1.6,0.4c0.5,0.1 1.1,0.3 1.6,0.4c1.6,0.4 3.2,0.7 4.8,1.1c0.5,0.1 1.1,0.2 1.6,0.3c1.1,0.2 2.2,0.4 3.2,0.6c0.5,0.1 1.1,0.2 1.6,0.3c1.1,0.2 2.2,0.4 3.3,0.6c0.6,0.1 1.1,0.2 1.6,0.3c1.6,0.2 3.2,0.5 4.8,0.7c0.6,0.1 1.2,0.2 1.8,0.2c0.4,0.1 0.8,0.1 1.3,0.1c0.4,0.1 0.9,0.1 1.3,0.1c0.7,0.1 1.3,0.1 1.9,0.2c0.2,0 0.4,0 0.6,0.1c30,2.8 60,-0.9 87.9,-10.5c12.1,-4.1 23.7,-9.4 34.9,-15.7c3.5,-2 6.9,-4 10.3,-6.2c1.8,-1.1 3.5,-2.3 5.3,-3.5c0.7,-0.5 0.9,-1.4 0.4,-2.1l-25.1,-34.6c-0.8,-1.1 -2.5,-1.1 -3.2,0.1c-1.2,2 -2.8,3.8 -4.8,5.2c-0.8,0.5 -1.6,1 -2.4,1.5c-7.6,3.9 -16.9,1.8 -22.1,-4.9c-3,-3.8 -4.2,-8.6 -3.6,-13.4c0.7,-4.8 3.2,-9 7.1,-11.9c2,-1.4 4.1,-2.4 6.4,-2.9c1.3,-0.3 1.9,-1.9 1.1,-3l-29.4,-40.4c-0.5,-0.6 -1.3,-0.8 -2,-0.4c0,0 0,0 0,0c-0.5,0.3 -0.9,0.6 -1.4,0.9c-0.4,0.2 -0.8,0.4 -1.1,0.7c-0.8,0.5 -1.6,0.9 -2.4,1.3c-0.3,0.1 -0.5,0.3 -0.8,0.4c-9.7,5 -20.4,7.8 -31.2,8.4c-0.3,0 -0.6,0 -0.9,0.1c-1,0 -2,0.1 -2.9,0.1c-0.4,0 -0.9,0 -1.3,0c-13.7,-0.2 -27.4,-3.9 -39.7,-11.5c0,0 -0.1,0 -0.1,0c-0.1,-0.1 -0.3,-0.2 -0.4,-0.2c-0.8,0.2 -1.2,0.2 -2,0.4l-34.5,47.5c-1.5,2.1 -4.2,2.8 -6.5,2c-0.5,-0.2 -1,-0.4 -1.4,-0.8c-1.6,-1.2 -2.5,-3.4 -2.3,-5.9c0,-0.2 0,-0.4 -0.1,-0.7c-3.4,-9.2 -14.2,-9.1 -18,-2.1c-1.9,3.4 -1.4,7.7 1.1,10.7c2.5,2.9 6.2,4.1 9.8,3.2c1.9,-0.5 3.9,-0.2 5.2,0.8c0.5,0.3 0.8,0.7 1.2,1.1c1.5,1.9 1.6,4.7 0.1,6.8l-30.2,41.6z"/> <path id="piece-4" class="tt-puzzle-piece" transform="rotate(143.852, 128.473, 98.3229)" d="m9.57,131.42c-0.5,0.7 -0.3,1.6 0.4,2.1c14.8,10.1 30.8,18.3 47.5,24.3c0,0 0.1,0 0.1,0.1c1.1,0.4 2.1,0.8 3.2,1.1c0.3,0.1 0.6,0.2 0.9,0.3c0.9,0.3 1.8,0.6 2.7,0.9c0.6,0.2 1.1,0.4 1.7,0.5c0.7,0.2 1.3,0.4 2,0.6c1.3,0.4 2.6,0.8 3.8,1.1c1.4,0.4 2.8,0.8 4.2,1.1c0.5,0.1 1,0.2 1.5,0.4c0.5,0.1 1.1,0.3 1.6,0.4c0.5,0.1 1.1,0.3 1.6,0.4c1.6,0.4 3.2,0.7 4.8,1.1c0.5,0.1 1.1,0.2 1.6,0.3c1.1,0.2 2.2,0.4 3.2,0.6c0.5,0.1 1.1,0.2 1.6,0.3c1.1,0.2 2.2,0.4 3.3,0.6c0.6,0.1 1.1,0.2 1.6,0.3c1.6,0.2 3.2,0.5 4.8,0.7c0.6,0.1 1.2,0.2 1.8,0.2c0.4,0.1 0.8,0.1 1.3,0.1c0.4,0.1 0.9,0.1 1.3,0.1c0.7,0.1 1.3,0.1 1.9,0.2c0.2,0 0.4,0 0.6,0.1c30,2.8 60,-0.9 87.9,-10.5c12.1,-4.1 23.7,-9.4 34.9,-15.7c3.5,-2 6.9,-4 10.3,-6.2c1.8,-1.1 3.5,-2.3 5.3,-3.5c0.7,-0.5 0.9,-1.4 0.4,-2.1l-25.1,-34.6c-0.8,-1.1 -2.5,-1.1 -3.2,0.1c-1.2,2 -2.8,3.8 -4.8,5.2c-0.8,0.5 -1.6,1 -2.4,1.5c-7.6,3.9 -16.9,1.8 -22.1,-4.9c-3,-3.8 -4.2,-8.6 -3.6,-13.4c0.7,-4.8 3.2,-9 7.1,-11.9c2,-1.4 4.1,-2.4 6.4,-2.9c1.3,-0.3 1.9,-1.9 1.1,-3l-29.4,-40.4c-0.5,-0.6 -1.3,-0.8 -2,-0.4c0,0 0,0 0,0c-0.5,0.3 -0.9,0.6 -1.4,0.9c-0.4,0.2 -0.8,0.4 -1.1,0.7c-0.8,0.5 -1.6,0.9 -2.4,1.3c-0.3,0.1 -0.5,0.3 -0.8,0.4c-9.7,5 -20.4,7.8 -31.2,8.4c-0.3,0 -0.6,0 -0.9,0.1c-1,0 -2,0.1 -2.9,0.1c-0.4,0 -0.9,0 -1.3,0c-13.7,-0.2 -27.4,-3.9 -39.7,-11.5c0,0 -0.1,0 -0.1,0c-0.1,-0.1 -0.3,-0.2 -0.4,-0.2c-0.8,0.2 -1.2,0.2 -2,0.4l-34.5,47.5c-1.5,2.1 -4.2,2.8 -6.5,2c-0.5,-0.2 -1,-0.4 -1.4,-0.8c-1.6,-1.2 -2.5,-3.4 -2.3,-5.9c0,-0.2 0,-0.4 -0.1,-0.7c-3.4,-9.2 -14.2,-9.1 -18,-2.1c-1.9,3.4 -1.4,7.7 1.1,10.7c2.5,2.9 6.2,4.1 9.8,3.2c1.9,-0.5 3.9,-0.2 5.2,0.8c0.5,0.3 0.8,0.7 1.2,1.1c1.5,1.9 1.6,4.7 0.1,6.8l-30.2,41.6z"/> <path id="piece-5" class="tt-puzzle-piece" transform="rotate(72.2996, 78.4729, 250.323)" d="m-40.43,283.42c-0.5,0.7 -0.3,1.6 0.4,2.1c14.8,10.1 30.8,18.3 47.5,24.3c0,0 0.1,0 0.1,0.1c1.1,0.4 2.1,0.8 3.2,1.1c0.3,0.1 0.6,0.2 0.9,0.3c0.9,0.3 1.8,0.6 2.7,0.9c0.6,0.2 1.1,0.4 1.7,0.5c0.7,0.2 1.3,0.4 2,0.6c1.3,0.4 2.6,0.8 3.8,1.1c1.4,0.4 2.8,0.8 4.2,1.1c0.5,0.1 1,0.2 1.5,0.4c0.5,0.1 1.1,0.3 1.6,0.4c0.5,0.1 1.1,0.3 1.6,0.4c1.6,0.4 3.2,0.7 4.8,1.1c0.5,0.1 1.1,0.2 1.6,0.3c1.1,0.2 2.2,0.4 3.2,0.6c0.5,0.1 1.1,0.2 1.6,0.3c1.1,0.2 2.2,0.4 3.3,0.6c0.6,0.1 1.1,0.2 1.6,0.3c1.6,0.2 3.2,0.5 4.8,0.7c0.6,0.1 1.2,0.2 1.8,0.2c0.4,0.1 0.8,0.1 1.3,0.1c0.4,0.1 0.9,0.1 1.3,0.1c0.7,0.1 1.3,0.1 1.9,0.2c0.2,0 0.4,0 0.6,0.1c30,2.8 60,-0.9 87.9,-10.5c12.1,-4.1 23.7,-9.4 34.9,-15.7c3.5,-2 6.9,-4 10.3,-6.2c1.8,-1.1 3.5,-2.3 5.3,-3.5c0.7,-0.5 0.9,-1.4 0.4,-2.1l-25.1,-34.6c-0.8,-1.1 -2.5,-1.1 -3.2,0.1c-1.2,2 -2.8,3.8 -4.8,5.2c-0.8,0.5 -1.6,1 -2.4,1.5c-7.6,3.9 -16.9,1.8 -22.1,-4.9c-3,-3.8 -4.2,-8.6 -3.6,-13.4c0.7,-4.8 3.2,-9 7.1,-11.9c2,-1.4 4.1,-2.4 6.4,-2.9c1.3,-0.3 1.9,-1.9 1.1,-3l-29.4,-40.4c-0.5,-0.6 -1.3,-0.8 -2,-0.4c0,0 0,0 0,0c-0.5,0.3 -0.9,0.6 -1.4,0.9c-0.4,0.2 -0.8,0.4 -1.1,0.7c-0.8,0.5 -1.6,0.9 -2.4,1.3c-0.3,0.1 -0.5,0.3 -0.8,0.4c-9.7,5 -20.4,7.8 -31.2,8.4c-0.3,0 -0.6,0 -0.9,0.1c-1,0 -2,0.1 -2.9,0.1c-0.4,0 -0.9,0 -1.3,0c-13.7,-0.2 -27.4,-3.9 -39.7,-11.5c0,0 -0.1,0 -0.1,0c-0.1,-0.1 -0.3,-0.2 -0.4,-0.2c-0.8,0.2 -1.2,0.2 -2,0.4l-34.5,47.5c-1.5,2.1 -4.2,2.8 -6.5,2c-0.5,-0.2 -1,-0.4 -1.4,-0.8c-1.6,-1.2 -2.5,-3.4 -2.3,-5.9c0,-0.2 0,-0.4 -0.1,-0.7c-3.4,-9.2 -14.2,-9.1 -18,-2.1c-1.9,3.4 -1.4,7.7 1.1,10.7c2.5,2.9 6.2,4.1 9.8,3.2c1.9,-0.5 3.9,-0.2 5.2,0.8c0.5,0.3 0.8,0.7 1.2,1.1c1.5,1.9 1.6,4.7 0.1,6.8l-30.2,41.6z"/> </symbol> </defs> </svg>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何检查鼠标指针越过浏览器平面（鼠标退出网页）？ - How to check mouse pointer is crossing browser plane (mouse exits the webpage)? 如何将我的鼠标指针包含在canvas / div中？ - How to contain my mouse pointer within a canvas/div? 如何检查鼠标指针是否在javascript中顺时针或逆时针移动 - how to check if mouse pointer is moving clockwise or anticlockwise in javascript 如何更改鼠标指针？ - How to change the mouse pointer? 如何在javascript中传递鼠标单击事件？ - How can I pass a mouse click event within javascript? PaperJS如何在组项目中找到与鼠标事件最接近的项目 - PaperJS how to find the nearest item to a mouse event within a Group item 如何检查上下文菜单事件是由鼠标或键盘在jquery中触发的？ - how to check context menu event is triggered from mouse or keyboard in jquery? 将鼠标指针放在给定的直径内 - Placing mouse pointer within a given diameter 将鼠标悬停在线系列上的事件和光标指针上 - Mouse over event and cursor pointer on the line series 拖动事件期间鼠标指针不断闪烁 - mouse pointer keeps blinking during drag event
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM