Question

以下是我尝试过的jsfiddle

请确保您需要滚动输出以查看jsfiddle中的内容

我想要的是用css在这些文本之间添加垂直间距，是否可以？

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800px" height="400px" 
    style="position: relative; display: block; left: -0.09090423583984375px; top: -0.8068084716796875px;"><g><path style="display: block; " 
    d="M714 170 790 170 790 225 714 225 z" stroke="" stroke-width="0" stroke-linecap="square"
    stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="#a8c6fa"></path>
    <text id="k10002" data-model-id="k10016" x="734" y="187" fill-opacity="1" 
    style="font: 12px Arial,Helvetica,sans-serif; cursor: pointer;" fill="#000">Extracted</text>
    <text id="k10015" data-model-id="k10014" x="734" y="202" fill-opacity="1" 
    style="font: 12px Arial,Helvetica,sans-serif; cursor: pointer;" fill="#000">Mapped</text>
    <text id="k10013" data-model-id="k10012" x="734" y="217" fill-opacity="1" 
    style="font: 12px Arial,Helvetica,sans-serif; cursor: pointer;" fill="#000">Validated</text>
    <path style="display: block; cursor: pointer;" data-model-id="k10016" 
    d="M719.5 179.5 727.5 179.5 727.5 186.5 719.5 186.5 z" stroke="#00a4d3" stroke-width="1" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="#00a4d3"></path>
    <path style="display: block; cursor: pointer;" data-model-id="k10014" 
    d="M719.5 194.5 727.5 194.5 727.5 201.5 719.5 201.5 z" stroke="#ffa834" 
    stroke-width="1" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" 
    stroke-opacity="1" fill="#ffa834"></path><path style="display: block; cursor: pointer;"
     data-model-id="k10012" d="M719.5 209.5 727.5 209.5 727.5 216.5 719.5 216.5 z" 
    stroke="#72bb53" stroke-width="1" stroke-linecap="square" stroke-linejoin="round" 
    fill-opacity="1" stroke-opacity="1" fill="#72bb53"></path></g></svg>

Answer 1

首先，svg不能在屏幕像素系统上工作。它正在与协调系统合作。它遵循我们指定的路径和其他坐标属性。

所以不要试图通过CSS来做到这一点。但是，您可以通过更改路径属性来增加间距。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800px" height="400px" style="position: relative; display: block; left: -0.09090423583984375px; top: -0.8068084716796875px;">
    <g>
        <path style="display: block; " d="M714 170 790 170 790 245 714 245 z" stroke="" stroke-width="0" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="#a8c6fa"></path>
        <text id="k10002" data-model-id="k10016" x="734" y="187" fill-opacity="1" style="font: 12px Arial,Helvetica,sans-serif; cursor: pointer;" fill="#000">Extracted</text>
        <text id="k10015" data-model-id="k10014" x="734" y="212" fill-opacity="1" style="font: 12px Arial,Helvetica,sans-serif; cursor: pointer;" fill="#000">Mapped</text>
        <text id="k10013" data-model-id="k10012" x="734" y="237" fill-opacity="1" style="font: 12px Arial,Helvetica,sans-serif; cursor: pointer;" fill="#000">Validated</text>
        <path style="display: block; cursor: pointer;" data-model-id="k10016" d="M719.5 179.5 727.5 179.5 727.5 186.5 719.5 186.5 z" stroke="#00a4d3" stroke-width="1" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="#00a4d3"></path>
        <path style="display: block; cursor: pointer;" data-model-id="k10014" d="M719.5 204.5 727.5 204.5 727.5 211.5 719.5 211.5 z" stroke="#ffa834" stroke-width="1" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="#ffa834"></path>
        <path style="display: block; cursor: pointer;" data-model-id="k10012" d="M719.5 229.5 727.5 229.5 727.5 236.5 719.5 236.5 z" stroke="#72bb53" stroke-width="1" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="#72bb53"></path>
    </g>
</svg>

<强> Play your fiddle here

检查svg标记的差异。

增加svg文本中的垂直空间

1 个答案: