증가 수직 공간

-1

난 당신이 내가하는 것입니다 원하는 것은 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>

출처

2014-07-18 Arun Bertil

그냥 머리를 숙이고, 문제를 진단하는 데 필요한 정보가 부족한 질문 인 http://stackoverflow.com/help/on-topic : 질문이 아니라 자세한 정보를 제공 할 수 있습니다. 문제를 자세히 설명하거나 질문 자체에 최소한의 예를 포함 시키십시오. – SW4

@ SW4 다음은 내가 시도한 결과입니다 .stackoverflow doesnt는 내가 시도한 질문을 닫는 것을 추천합니다 .. –

당신은 질문 본문 자체 내에서 코드를 제공함으로써 시도한 것을 보여줄 필요가 있습니다. 왜냐하면 SO는 미래의 사용자를위한 자체 포함 된 리소스를 목표로하고 컨텍스트에 대한 외부 리소스에 의존하지 않기 위해서입니다. – SW4

우선 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 마크 업의 차이점을 확인하십시오.

출처

2014-08-01 08:40:05

... 여기에서 경로는 동적으로 생성 된 유일한 옵션이다. js 또는 css에서 변경하는 것입니다. 가능합니까? –

js 솔루션을 사용해보십시오. 수 svg 빌드 js 소스 코드를 게시 할 수 있습니다. 나는 우리가 그것을 조정할 수 있다고 생각한다. –

증가 수직 공간

답변

관련 문제