具有所需形状填充的 svg 矩形或多边形

Question

正在尝试使用 svg 矩形和路径构建下方布局

下面是我试过的代码，

有人请建议或帮助用多边形或任何其他方法做有效的方法吗？面对填充颜色的问题，整个矩形都被颜色填充并且路径没有显示

4 kind of layouts with fill colors (A cell with 4 partitions or 3/2/1 partition)

我对 html 甚至 svg 都很陌生，添加一些想法来构建布局

Answer 1

在您的情况下，使用 <polygon> 或 <path> 并不重要。
路径可以更简洁，因为它们支持相对命令或 horizontal/vertical-only 快捷方式（css-tricks: The SVG path Syntax: An Illustrated Guide）。

很有可能，您的堆叠顺序需要颠倒：
由于您的 <rect> 用作背景，因此它必须位于形状组的第一行。

为了更好 re-usability 您可以将您的段存储在 <defs> 元素中，如下所示：

<svg style="display:none" aria-hidden="true" viewBox="-0.5 -0.5 41 41" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 1/1 -->
    <rect id="seg-1-1" class="stroke rect" x="0" y="0" width="40" height="40" />
    <!-- 2/2 -->
    <path id="seg-1-2" class="stroke path path1" d="M0 0 L40 40 L0 40Z" />
    <path id="seg-2-2" class="stroke path path2" d="M0 0 L40 0 L40 40Z" />
  </defs>
</svg>

您现在可以通过 id-referenced <use> 元素 use/place 您的元素：

<svg  viewBox="-0.5 -0.5 41 41" >
  <use href="#seg-1-2" />
  <use href="#seg-2-2" class="green" />
</svg>

viewBox="-0.5 -0.5 41 41" 用于根据应用 stroke-width 调整 svg 边界。否则外部笔划将被裁剪。

示例：多个分区

svg{
  display:inline-block;
  width:20em;
}

.svgAsset{
  display:none;
}

.stroke{
  stroke-width:1;
  stroke:#ccc;
}

use{
   fill: #eee;
}

.green{
  fill:green
}

.red{
  fill:red
}

.yellow{
  fill:yellow
}

<svg style="display:none" aria-hidden="true" viewBox="-0.5 -0.5 41 41" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 1/1 -->
    <rect id="seg-1-1" class="stroke rect" x="0" y="0" width="40" height="40" />
    <!-- 2/2 -->
    <path id="seg-1-2" class="stroke path path1" d="M0 0 L40 40 L0 40Z" />
    <path id="seg-2-2" class="stroke path path2" d="M0 0 L40 0 L40 40Z" />
    <!-- 3/3 -->
    <path id="seg-1-3" class="stroke path path1" d="M0 0 L20 0 L20 20 L0 40 Z" />
    <path id="seg-2-3" class="stroke path path2" d="M20 0 L40 0 L40 40 L20 20 Z" />
    <path id="seg-3-3" class="stroke path path3" d="M0 40 L20 20 L40 40 Z" />
    <!-- 4/4 -->
    <path id="seg-1-4" class="stroke path path1" d="M0 0 L40 0 L20 20Z" />
    <path id="seg-2-4" class="stroke path path2" d="M40 0 L40 40 L20 20Z" />
    <path id="seg-3-4" class="stroke path path3" d="M0 40 L40 40 L20 20Z" />
    <path id="seg-4-4" class="stroke path path4" d="M0 0 L20 20 L0 40Z" />
  </defs>
</svg>


<svg  viewBox="-0.5 -0.5 41 41" >
  <use href="#seg-1-1" class="green" />
</svg>

<svg  viewBox="-0.5 -0.5 41 41" >
  <use href="#seg-1-4" />
  <use href="#seg-2-4" class="green" />
  <use href="#seg-3-4" />
  <use href="#seg-4-4" />
</svg>

<svg  viewBox="-0.5 -0.5 41 41" >
  <use href="#seg-1-2" />
  <use href="#seg-2-2" class="green" />
</svg>

<svg  viewBox="-0.5 -0.5 41 41" >
  <use href="#seg-1-3" class="yellow" />
  <use href="#seg-2-3" class="green" />
  <use href="#seg-3-3"  class="red"/>
</svg>

<svg  viewBox="-0.5 -0.5 41 41" >
  <use href="#seg-1-3" class="green" />
  <use href="#seg-2-3" class="green" />
  <use href="#seg-3-3" class="green" />
</svg>

Answer 2

我试了下，终于达到了想要的效果

下面是我的代码

<table>
  <tr>
    <td>
      DEMO

      <svg height="50" width="50">
        <polygon
          points="0,0 0,50 50,50 50,0"
          style="fill: lightgray; stroke: darkgray; stroke-width: 2px"
        >
          <title>your title</title>
        </polygon>
        <text x="25" y="32" text-anchor="middle" fill="red" font-size="20">
          1
          <title>your title2222</title>
        </text>
      </svg>
    </td>
    <td>
      <svg height="50" width="50">
        <rect
          width="50"
          height="50"
          style="fill: lightgray; stroke: darkgray; stroke-width: 2px"
        />
      </svg>
      <svg height="50" width="50">
        <polygon
          points="0,0 0,50 50,50 50,0"
          style="fill: lightgray; stroke: darkgray; stroke-width: 2px"
        />
      </svg>
    </td>
    <td>
      <svg height="50" width="50">
        <polygon
          points="0,0 0,50 50,50"
          style="fill: lightgray; stroke: darkgray; stroke-width: 2px"
        />
        <polygon
          points="0,0 50,0 50,50"
          style="fill: lightgray; stroke: darkgray; stroke-width: 2px"
        />
      </svg>
    </td>
    <td>
      <svg height="50" width="50">
        <polygon
          points="25,0 0,0 0,50 25,25"
          style="fill: lightgray; stroke: darkgray; stroke-width: 2px"
        />
        <polygon
          points="25,0 50,0 50,50 25,25"
          style="fill: lightgray; stroke: darkgray; stroke-width: 2px"
        />

        <polygon
          points="0,50 50,50 25,25"
          style="fill: lightgray; stroke: darkgray; stroke-width: 2px"
        />
      </svg>
    </td>
    <td>
      <svg height="50" width="50">
        <polygon
          points="0,0 0,50 25,25"
          style="fill: lightgray; stroke: darkgray; stroke-width: 2px"
        />
        <polygon
          points="50,0 50,50 25,25"
          style="fill: lightgray; stroke: darkgray; stroke-width: 2px"
        />

        <polygon
          points="0,50 50,50 25,25"
          style="fill: lightgray; stroke: darkgray; stroke-width: 2px"
        />

        <polygon
          points="0,0 25,25 50,0"
          style="fill: lightgray; stroke: darkgray; stroke-width: 2px"
        />
      </svg>
    </td>
  </tr>
</table>

具有所需形状填充的 svg 矩形或多边形

svg rect or polygon with desired shape fill

html

svg

polygon

示例：多个分区