平面交叉

我想通過css創建一個水平交叉的動態。最重要的是第一張圖片。在ST-01中，我想要第二幅圖像，在ST-02中，我想要第三幅圖像。

<g transform="translate(50 150) scale(1.2 1)" class="Box-ST00" stroke="none" fill="none">
    <rect width="150" height="10"/>
</g>
<g transform="translate(90 30) scale(1.2 1) rotate(90)" class="Box-ST00" stroke="none" fill="none">
    <rect width="150" height="10" transform="scale(1.2 1) rotate(-50)" />
</g>

使用file.css如下所示:

/*框狀態00 -無*/ 。盒子-ST00 { 筆畫:黑色；填充:黑色；筆畫寬度:var( - boxes_stroke_width_small) }

/* Box STATE01 -白色*/ 。盒子-ST01 { 筆畫:白色；填充:白色；筆畫寬度:var( - boxes_stroke_width_small) }

我嘗試了這種方法，我只得到完全填滿或未填滿的平交道口。 有人有主意嗎？

看著你的截圖，我真的不確定你想要的形狀。但首先我會刪除你的變換比例樣式(因為我不明白這一點)和你想在CSS端重新定義的屬性(筆畫& amp填充)。 我還改變了顏色，以區分筆畫和填充，然后我把& quot1px & quot設置為stroke-width樣式，而不是css var，因為它沒有在您的示例中定義。

所以應該是這樣的:

<svg>
  <g transform="translate(100 140)" class="Box-ST00">
    <rect width="150" height="10"/>
  </g>
  <g transform="translate(90 150) rotate(0)" class="Box-ST00">
    <rect width="150" height="10" transform="rotate(-90)" />
  </g>
</svg

<style>
  .Box-ST00 { stroke: black; fill: #ccc; stroke-width: 1px }
  .Box-ST01 { stroke: black; fill: #ccc ; stroke-width: 1px }
</style>