Question

Test page

标记：

import javax.swing.*;
import java.awt.*;

public class SplitPane extends JPanel{

    private JPanel mainPanel;
    private JPanel leftPanel;
    private JPanel rightPanel;


    public SplitPane() {

    }

    public static void main(String args[]) {
        SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                new SplitPane().createAndShowUI();
            }
        });
    }

    private void createAndShowUI() {
        JFrame frame = new JFrame("Test");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(500, 500);
        initComponents(frame.getContentPane());
        frame.setVisible(true);
    }

    private void initComponents(Container contentPane) {
        mainPanel = new JPanel();
        leftPanel = new JPanel();
        rightPanel = new JPanel();
        leftPanel.add(new JLabel("left"));
        rightPanel.add(new JLabel("right"));
        leftPanel.setPreferredSize(new Dimension(200, 40));
        rightPanel.setPreferredSize(new Dimension(280, 400));
        leftPanel.setBackground(Color.WHITE);
        rightPanel.setBackground(Color.WHITE);

        JSplitPane mainJsp = new JSplitPane(JSplitPane.HORIZONTAL_SPLIT);
        mainJsp.add(leftPanel, JSplitPane.TOP);
        mainJsp.add(rightPanel, JSplitPane.BOTTOM);
        mainJsp.setOneTouchExpandable(true);
        mainJsp.setDividerLocation(150);
        mainPanel.add(mainJsp);
        contentPane.add(mainPanel);

        leftPanel = new PaintPanel();


    }

    public class PaintPanel extends JPanel {
        public PaintPanel() {
            System.out.println("PaintPanel");
            this.setLayout(new BorderLayout());
            this.setPreferredSize(new Dimension(300, 300));
        }

        @Override
        public void paintComponent(Graphics g) {

            System.out.println("12345678");
            super.paintComponent(g);
            //g.setColor(Color.black);
            g.drawRect(3, 3, 20, 20);
        }
    }
}

CSS

<svg viewBox="0 0 400 400"  preserveAspectRatio="xMinYMin meet">
    <g>
        <circle r="70" class="circle-back" />
    </g>
</svg>

正如您在测试页面中看到的那样，我正在尝试定位具有一定半径的响应圆，并且我希望它将自己定位在容器的中间，而不管容器的宽度。如果圆圈也适合容器的高度，那就更好了。

css .doughnutChart{ text-align:center; padding:50% 1em 0; position: relative; overflow: hidden; > svg{ position: absolute; top: 0; left:0; right:0; margin: auto; g{ transform:rotate(270deg) translate(-88px, 200px); } } circle{ fill: none; } .circle-back { stroke:#EEE; stroke-width: 5px; } }使用translate元素上的百分比似乎存在问题，这使我无法执行g

这是我所拥有的一个非常简化的版本，因为在我的代码中它是一个圆环图，这就是为什么它有translate(-50%, -50%)转换它

Answer 1

如果您希望SVG为圆的大小，则需要将视框设置为半径的两倍并确定中心点。

圆圈以cx，cy为中心，半径为r。 cx，cy和r是元素的属性。

＆＃13;

svg {
  height: 100px;
  border: 1px solid green;
}
circle {
  fill: none;
}
.circle-back {
  stroke: #EEE;
  stroke-width: 5px;
}

＆＃13;

<svg viewBox="0 0 140 140" preserveAspectRatio="xMinYMin meet">
  <g>
    <circle r="70" cx="50%" cy="50%" class="circle-back" />
  </g>
</svg>

＆＃13;

您始终需要使用cx和cy来确定圆圈的中心，如果没有说明，则默认为0,0（左上角）。

或者，对于与视箱无关的居中圆，您可以使用％radius。

＆＃13;

svg {
  height: 100px;
  border: 1px solid plum;
}
circle {
  fill: none;
}
.circle-back {
  stroke: #EEE;
  stroke-width: 5px;
}

＆＃13;

<svg viewBox="0 0 140 140" preserveAspectRatio="xMinYMin meet">
  <g>
    <circle r="50%" cx="50%" cy="50%" class="circle-back" />
  </g>
</svg>

＆＃13;

在原始代码中。

＆＃13;

svg {
  height: 100px;
  border: 1px solid red;
}
circle {
  fill: none;
}
.circle-back {
  stroke: #EEE;
  stroke-width: 5px;
}

＆＃13;

<svg viewBox="0 0 400 400" preserveAspectRatio="xMinYMin meet">
  <g>
    <circle r="70" cx="200" cy="200" class="circle-back" />
  </g>
</svg>

＆＃13;

看到区别？

参考Link以及教程＆amp;视频

在容器中居中响应svg圈

Test page

标记：

CSS

1 个答案: