首页 > 解决方案 > SVG圆图内的居中图标

问题描述

我正在尝试在 SVG 圆形图中放置一个图标,以便它显示如下:SVG graph example

无论我做什么,内部图标的一侧和显示的 SVG 路径之间总是存在细微的差距。我认为这个问题与 SVG 圆形图的弧度不是一个完美的圆有关

这是我已经尝试过的所有内容:

<path d="M82,153.53C122.23,153.41,153.2,121,153.46,82,153.69,43.3,122.59,10.94,82,10.49"
                             fill="none" stroke="#7aef93"
                             stroke-miterlimit="10" stroke-width="15" />

我开始在CodePen上玩这个,但并没有走得太远。

这甚至有可能实现吗?我真的很感激任何和所有的帮助/反馈!

标签: javascriptcsssvg

解决方案


这是一个快速的解决方案,我不知道它是否好。您应该像这样将类 circle 添加到第二个 svg:

<svg class="circle" width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle cx="60" cy="60" r="59" fill="#F07C7C" stroke="#D0CFCF" stroke-width="2"/>
    <rect x="22" y="22" width="75" height="75" fill="url(#pattern2)"/>
    <defs>
         <pattern id="pattern2" patternContentUnits="objectBoundingBox" width="1" height="1">
             <use xlink:href="#image2" transform="scale(0.00390625)"/>
          </pattern>
         <image id="image2" width="256" height="256"
                   xlink:href="data:image/png;base64,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"/>
    </defs>
</svg>

然后你应该添加这个 css:

.circle {
    position: absolute;
    top: 25px;
    left: calc(50% - 108px);
}

这应该在第一个 svg 中创建第二个 svg。


推荐阅读