Css 如何调整胜利的差距？

下面是一个通用的胜利代码

 <svg viewBox={viewBox}>
          <VictoryPie
            standalone={false}
            width={width} height={height}
            data={data}
            innerRadius={innerRadius}
            colorScale={colorScale}

          />
          <VictoryLegend x={width - 50} y={30}
            title="Totals"
            centerTitle
            orientation="vertical"
            gutter={20}
            style={{
              title: { fontSize: 15 }
            }}
            data={legendDataWithStyle}
            standalone={false}
          />
</svg>

这是对应的

我使用了

VictoryLegend x={width-50}y={30}

来调节piechart和legend之间的距离。但我发现很难精确地调整它。如何增加饼图和图例的距离？

我建议您使用具有适当值的元素作为

transform

属性

gSVG元素是用于对其他SVG元素进行分组的容器。 应用于元素的转换将在其所有对象上执行 子元素及其任何属性都由其子元素继承 元素

和

svg

元素的

width

和

height

属性，而不是

viewBox

。 我用叉子叉了你的小提琴，请检查- 在这里

//我们在这里为svg中的legend fits添加了100

//我们在这里移动40px上的图例

@liamxu我很乐意帮忙。

<svg width={width + 100} height={height}> // we add 100 here to legend fits in svg

<g transform="translate(40,0)"> // we move legend on 40px here
  <VictoryLegend x={width} y={30}
    title="Totals"
    centerTitle
    orientation="vertical"
    gutter={20}
    style={{
     title: { fontSize: 15 }
    }}
    data={legendDataWithStyle}
    standalone={false}
  />
</g>