需要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）。

所以我的下一個想法是創建一個「掩碼」元素。 「面具」元素是另一個四分之一圓圈（codepen中的藍色），它反映了門「框架」的區域，並且與門一前一後旋轉以最終遮蔽門「框架」的填充。如果某些房間的門與其他牆不那麼接近，這將是一個適當的解決方案，但是我設計了SVG，以便它在移動設備的scale(1)上顯得非常清晰。

我設計的下一個解決方法與上一個類似，但不是使用鏡像四分之一圓，而是使用rect角度（codepen中的綠色），我會在增加然後減小寬度時旋轉。我已經與這個解決辦法碰到的問題是，無論出於何種原因，rect角度看似向外增加其width從中心兩個方向，也transition S是其x位置，儘管其transform-origin被設置爲100% 100%。值得注意的是，我玩了很多關於價值觀的知識，並且已經將它運用得差不多了，以至於它遮蔽了大部分的四分之一圓門「框架」。儘管如此，我相當肯定，只要藍圖是scaled，我就必須不斷調整這些值，並且似乎沒有任何韻律或理由來證明「有效」的特定值。

另一個想法我是爲了降低門的大小，但恐怕這樣做的大門將成爲邊緣模糊不清的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..."開頭的部分）在兩個位置都是相同的，從而使得相對容易的手動複製，甚至只需要一點屬性retri eval和字符串操作，一些自動複製。

然後，對於每個門開口一個房間的，門填充路徑添加到地板填充路徑如上所示，但對於每個門開口成一個房間，切斷門填逆路徑使用<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>