我正在处理单独的 SVG 路径,当有路径连接时,需要斜接效果。这对我来说很新。
SVG 形状看起来像多边形,每一边都是单独的路径。
我的 SVG 代码示例,不显示原始多边形。请查看 o/p 的图像:
<svg viewBox="0 0 330 330">
<g id="v-3" class="joint-viewport">
<g model-id="db69ee92-054d-4ce5-9300-ae09f385d9f2" id="j_1" class="joint-cell joint-type-custom joint-type-custom-line joint-element joint-theme-default" data-type="custom.Line" transform="translate(90,90)">
<g class="rotatable" id="v-12">
<g class="scalable" transform="scale(2.5,3.75)">
<path class="path0" id="v-13" d="M 0 0 L 30 0" stroke="#806476" stroke-width="15" cursor="pointer" event="element:path-click" stroke-linecap="square"></path>
<path class="path1" id="v-14" d="M 30 0 L 30 20" stroke="#181972" stroke-width="15" cursor="pointer" event="element:path-click" stroke-linecap="square"></path>
<path class="path2" id="v-15" d="M 30 20 L 60 20" stroke="#91a19b" stroke-width="15" cursor="pointer" event="element:path-click" stroke-linecap="square"></path>
<path class="path3" id="v-16" d="M 60 20 L 60 40" stroke="#f24167" stroke-width="15" cursor="pointer" event="element:path-click" stroke-linecap="square"></path>
<path class="path4" id="v-17" d="M 60 40 L 0 40" stroke="#21e578" stroke-width="15" cursor="pointer" event="element:path-click" stroke-linecap="square"></path>
<path class="path5" id="v-18" d="M 0 40 L 0 0" stroke="#cf2fe0" stroke-width="15" cursor="pointer" event="element:path-click" stroke-linecap="square"></path>
</g>
</g>
</g>
</g>
</svg>
下面的 SVG 图像链接显示了多边形形状。当我单击各个路径时,交点应更改为第一条路径超过第二条路径,第二条路径超过第一条路径,然后是斜接效果。我实现了另外两个,但没有实现斜接效果。
SVG shape 第二个图像链接显示了每次鼠标单击的过渡。我需要知道上图所示的斜接/对 Angular 线效果。
Image 3 如果它是单个 svg ,那么可以使用 line-join 来完成斜接效果。 这里如何实现斜接效果?
最佳答案
为了获得斜 Angular ,您需要使用形状而不是笔触。如果你认为斜接是一个直 Angular 为15的等腰直 Angular 三 Angular 形,你可以手工完成。
<svg viewBox="0 0 300 300" width="200">
<path id="_1" d="M50,50L150,50 135,65 65,65z" fill="#806476"/>
<path id="_2" d="M150,50L150,150 135,165 135,65z" fill="#181972"/>
<path id="_3" d="M150,150 L250,150 235,165 135,165z" fill="#91a19b" />
<path id="_4" d="M250,150L250,250 235 235 235 165z" fill="#f24167"/>
<path id="_5" d="M250,250L50,250 65,235 235 235z" fill="#21e578"/>
<path id="_6" d="M50,250L50,50 65,65 65,235z" fill="#cf2fe0" />
</svg>
关于javascript - 两个单独路径加入 SVG 时的斜接效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52640754/