javascript - 需要 SVG 解决方法

Question

我正在将蓝图重新创建为 SVG，如本 Pen 中所示.我显然还没有完成，所以现在的代码有点草率，因为我一直在尝试不同的解决方法，但都没有成功。

我实现的效果之一是房间将 fill用opacity: 0.5如果悬停。

最初，门仅由两个元素组成(path 或旋转的线，以及 path 的 stroke-dashoffset 是动画的)以实现门关闭然后打开的效果，因此，如果一个房间有向外突出并悬停的门，则该(或那些)门框内将有“空白”空间。

因此，为了fill门“框架”内的空白空间我只是创建了一个封闭路径，将其覆盖在最初的两个元素之上，摆脱了它的 stroke , 并给它一个 fill .但是，此解决方法的问题是，如果您旋转门的 fill ，它也被设置为 opacity: 0.5 ，与关门同步，当门完全关闭时，房间的那部分fill当然会变成更深的颜色(即 opacity: 0.5 + opacity: 0.5 )。

所以我的下一个想法是创建一个“ mask ”元素。 “掩码”元素是另一个四分之一圆(codepen 中的蓝色)，它反射(reflect)了门“框架”的区域，并且还与门一起旋转，最终遮盖了门“框架”的填充。如果一些房间的门离其他墙壁不是那么近，这将是一个合适的解决方案，但我设计了 SVG，使其在 scale(1) 时看起来非常清晰。用于移动设备。

我设计的下一个解决方法与上一个类似，但我尝试使用 rect 而不是使用镜像四分之一圆 Angular (codepen 中的绿色)，我会在增加和减少宽度的同时旋转它。我在使用此解决方法时遇到的问题是，无论出于何种原因，rect Angular 似乎增加了它的width从它的中心向两个方向向外，还有transition这是它的 x尽管它的位置 transform-origin被设置为 100% 100% .值得注意的是，我对这些值进行了相当多的尝试，并且几乎可以充分发挥作用，因此它遮住了大部分四分之一圆门“框架”；尽管如此，我相当确定只要蓝图为 scale，我就必须不断调整这些值。 d，而且对于“有效”的特定值似乎没有任何押韵或理由。

我的另一个想法是减小门的尺寸，但我担心这样做会使门在 scale(1) 处变得难以辨认。 .

以前有人遇到过这个问题吗？

有人知道任何解决方法吗？

Answer 1

只是对您尝试的第一个策略的建议。你说你得到了一个较暗的颜色，因为不透明度重叠，门填充旋转到地板填充的顶部。当您分别将不透明度应用于每个元素时，就会发生这种情况。但是，如果您可以将两个元素组合在一起，然后将不透明度应用到该组，则两个形状实际重叠的地方不会出现较暗的颜色。下面的代码演示了这一点。左侧的形状分组对两个元素中的每一个都应用了不透明度。除了不透明度应用于整个组之外，右侧形状分组的绘制方式相同。您能否以这种方式对元素进行分组，以便能够将不透明度应用于组元素？

<svg width='400'>
  <g transform='translate(0,0)'>
    <path d='M100,90 L100,40 A50,50 0 0 0 50,90 Z' transform='rotate(45, 100, 90)' opacity='0.5'/>
    <path d='M100,10 H200 V110 H100 Z' opacity='0.5'/>
  </g>
  <g transform='translate(200,0)' opacity='0.5'>
    <path d='M100,90 L100,40 A50,50 0 0 0 50,90 Z' transform='rotate(45, 100, 90)'/>
    <path d='M100,10 H200 V110 H100 Z'/>
  </g>
</svg>

当一扇门属于两个不同的房间时，情况会稍微复杂一些。在这种情况下，对于门打开的房间，您只需将门填充添加到地板填充，如上所示。但是，对于门打开的房间，您需要从地板填充中减去门填充的形状。为此，首先创建门填充的反面，即:

<svg width="200">
    <path id="doorFillPath"
          transform="translate(120,100)"
          d="                                       M0,0 h-50 a50,50 0 0 1 50,-50 Z"
          />
</svg>

<svg width="200">
    <path id="doorFillInvPath"
          transform="translate(120,100)"
          d="M-1000,-1000 v2000 h2000 v-2000 h-2000 M0,0 h-50 a50,50 0 0 1 50,-50 Z"
          />
</svg>

这需要将门填充形状的代码加倍，因为门形状部分放置在 d 中反转形状的属性，因此不能使用 <defs> 动态复制和 <use> , 但至少 d门填充形状的路径组件(即以 "M0,0..." 开头的部分)在两个地方都是相同的，这使得手动复制相对容易，甚至只需一点属性检索和字符串操作，一些自动复制。

然后，对于每个打开房间的门，将门填充路径添加到地板填充路径，如上所示，但对于每个进入房间的门, 使用 <clipPath> 从地板填充中切出门填充反向路径元素和一个 clip-path属性如下所示。

请注意，使用此策略，<defs> 中可以有一个门填充形状每个部分 <use>在图像的主体中复制变形，但您必须在 <defs> 内制作门的每个单独副本反转填充形状部分，在那里转换每个副本，并在那里给每个副本一个适当的 id。不过，它对我来说仍然是一个可行的解决方案。

.floor {
  fill: red;
  opacity: 0;
}
.floor:hover {
  opacity: 0.3;
}
#walls, #door {
  fill: none;
  stroke: black;
  stroke-width: 4;
}

<svg style="position: absolute; z-index: 100;" width="100%" height="100%">

  <defs>
    <path id="doorFillInvPath" d="M-1000,-1000 v2000 h2000 v-2000 h-2000
                               M0,0 h-50 a50,50 0 0 1 50,-50 Z"/>
    <path id="doorFillPath" d="M0,0 h-50 a50,50 0 0 1 50,-50 Z"/>
    <clipPath id="doorFillInv1" transform="translate(210,100) rotate(45)">
      <use href="#doorFillInvPath"/>
    </clipPath>
    <clipPath id="doorFillInv2" transform="translate(210,200) rotate(60)">
      <use href="#doorFillInvPath"/>
    </clipPath>
    <line id="door" x1="0" y1="0" x2="0" y2="-50"/>
  </defs>

  <g transform="scale(0.6) translate(10,40)">
    <g class="floor">
      <use href="#doorFillPath" transform="translate(210,200) rotate(60)"/>
      <path id="room1" d="M10,10 h200 v250 h-200 z" stroke="none" clip-path="url(#doorFillInv1)"/>
    </g>
    <g class="floor">
      <use href="#doorFillPath" transform="translate(210,100) rotate(45)"/>
      <path id="room2" d="M210,10 h150 v100 h50 v150 h-200 z" stroke="none" clip-path="url(#doorFillInv2)"/>
    </g>

    <use href="#door" transform="translate(210,100) rotate(-45)"/>
    <use href="#door" transform="translate(210,200) rotate(60)"/>
    <path id="walls" d="M210,10 h150 v100 h50 v150 h-200 v-60 m0,-50 v-50 m0,-50 v-40 h-200 v250 h200"/>
  </g>
</svg>
<p>Mouse over (i.e. hover over) each room to see the floor fills.</p>
<p style="color: #ccc;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nunc neque, molestie quis erat in, dignissim pretium nulla. Maecenas eget pretium purus. Aliquam interdum at dolor id sagittis. Phasellus risus dui, consectetur ac tortor ac, dignissim consequat felis. Maecenas lacinia ac arcu in porttitor. Duis aliquam maximus quam, vel venenatis dui. Quisque placerat ligula sit amet finibus vestibulum. Suspendisse tristique pharetra eleifend. Fusce nisl lectus, gravida vitae elit sed, vehicula condimentum orci. Sed dapibus pharetra odio ultricies egestas. Quisque pretium vehicula ante in commodo. Nulla eget turpis ac sem tristique posuere ac non diam. Aliquam at pulvinar enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nunc neque, molestie quis erat in, dignissim pretium nulla. Maecenas eget pretium purus. Aliquam interdum at dolor id sagittis. Phasellus risus dui, consectetur ac tortor ac, dignissim consequat felis. Maecenas lacinia ac arcu in porttitor. Duis aliquam maximus quam, vel venenatis dui. Quisque placerat ligula sit amet finibus vestibulum. Suspendisse tristique pharetra eleifend. Fusce nisl lectus, gravida vitae elit sed, vehicula condimentum orci. Sed dapibus pharetra odio ultricies egestas. Quisque pretium vehicula ante in commodo. Nulla eget turpis ac sem tristique posuere ac non diam. Aliquam at pulvinar enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nunc neque, molestie quis erat in, dignissim pretium nulla. Maecenas eget pretium purus. Aliquam interdum at dolor id sagittis. Phasellus risus dui, consectetur ac tortor ac, dignissim consequat felis.</p>