java实现SVG图创建全过程_开发_开发者_运维开发者技术经验分享

前言

svg作为矢量图，如何进行结构分析重构，是很重要的一环，在web开发中也是比较常见。本文开始介绍如何使用Java操作svg图。

一、SVG是什么？

svg是一种矢量图，其不会随着大小变化而失真。

在开发环境下，其可以看作一个XML文件，每一个图形都是可以操作的单位，可以设置位置、大小、颜色等等。

二、生成一个svg图

1. 引入依赖

<dependency>
    <groupId>org.apache.xmlgraphics</groupId>
    <artifactId>BATik-all</artifactId>
    <version>1.14</version>
</dependency>

2. 图形配置类

2.1 svg图形基类

@Data
public abstract class ShapeConfig {
    protected String id;
    protected String type;
    protected Map<String, String> attributes;

    public ShapeConfig(String type, String id) {
        this.type = type;
        this.id = id;
    }
}

attributes主要存一些定义完成属性之外的一些属性，后面再具体介绍。

2.2 矩形子类

@Setter
@Getter
public class RectConfig extends ShapeConfig{
    private int x;
    private int y;
    private int width;
    private int height;
    private String fill = "black";
    private String stroke = "none";
    private String strokeWidth = "1";
    private int rx = 0;
    private int ry = 0;
    
    public RectConfig(String id) {
        super("rect", id);
    }
}

父类的attributes则可以存当前矩形定义的属性之外的属性，例如设置透明度：

attributes.put("opacity", "0.8");

2.3 文本子类

@Setter
@Getter
public class TextConfig extends ShapeConfig{
    private int x;
    private int y;
    private String content;
    private String fill = "black";
    private String fontFamily = "Arial";
    private String fontSize = "16";

    public TextConfig(String id) {
        super("text", id);
    }
}

也可以定义很多其他的子类，比如线条、圆等，这里就两个举例。

3. svg面板类

面板可以添加多个形状

@Data
public class SvgConfig {
    private int width = 400;
    private int height = 300;
    private String backgroundColor = "white";
 编程客栈   private List<ShapeConfig> shapes = new ArrayList<>();

    public void addShape(ShapeConfig shape)
    {
        shapes.add(shape);
    }
}

4. 创建svg图

4.1 定义属性

创建svg面板、矩形、文本，然后创建svg。

public static void main(String[] args) {
        try {
            // 创建SVG面板配置
            SvgConfig config = new SvgConfig();
            config.setWidth(500);
            config.setHeight(400);
            config.setBackgroundColor("#f0f8ff");

            // 添加矩形
            RectConfig rect1 = new RectConfig("rwww.devze.comect1");
            rect1.setX(200);
            rect1.setY(50);
            rect1.setWidth(100);
            rect1.setHeight(80);
            rect1.setFill("#4ecdc4");
            rect1.setStroke("#333");
            rect1.setStrokeWidth("2");
            rect1.setRx(10);
            rect1.setRy(10);
            config.addShape(rect1);

            // 添加文本
            TextConfig text1 = new TextConfig("text1");
            text1.setX(100);
            text1.setY(300);
            text1.setContent("Hello SVG!");
            text1.setFill("#1a936f");
            text1.setFontFamily("Arial");
            text1.setFontSize("20");
            config.addShape(text1);

            // 生成SVG文件
            generateSvg(config, "generated.svg");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

4.2 初始化svg的dom

通过DocumentBuilderFactory工厂类创建DocumentBuil编程客栈der实例，然后创建一个空的svg文档，进行文档的配置以及添加元素，将所有元素添加到文档中。

根元素：所有元素的顶层父元素
背景：子元素
图形：子元素

public static void generateSvg(SvgConfig config, String filename) throws Exception {
        // 创建空的SVG文档
        DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
        DocumentBuilder builder = factory.newDocumentBuilder();
        Document doc = builder.newDocument();

        // 创建SVG根元素
        Element svg = doc.createElement("svg");
        svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
        svg.setAttribute("width", String.valueOf(config.getWidth()));
        svg.setAttribute("height", String.valueOf(config.getHeight()));
        svg.setAttribute("viewBox", "0 0 " + config.getWidth() + " " + config.getHeight());
        doc.appendChild(svg);

        // 添加背景
        if (config.getBackgroundColor() != null &a编程客栈mp;& !config.getBackgroundColor().equals("white")) {
            Element background = doc.createElement("rect");
            background.setAttribute("x", "0");
            background.setAttribute("y", "0");
            background.setAttribute("width", String.valueOf(config.getWidth()));
            background.setAttribute("height", String.valueOf(config.getHeight()));
            background.setAttribute("fill", config.getBackgroundColor());
            svg.appendChild(background);
        }

        // 添加图形元素
        for (ShapeConfig shapeConfig : config.getShapes()) {
            Element shapeElement = createShapeElement(doc, shapeConfig);
            if (shapeElement != null) {
                svg.appendChild(shapeElement);
            }
        }

        // 保存SVG文件
        saveSvgFile(doc, filename);
        System.out.println("SVG文件已生成: " + filename);
    }

4.3 添加图形元素

通过config获取到图形类，判断type创建相应的元素对象，然后将元素对象添加到根元素中。

private static Element createShapeElement(Document doc, ShapeConfig config) {
        Element element = null;
        switch (config.getType()) {
            case "rect":
                element = createRectElement(doc, (RectConfig) config);
                break;
            case "text":
                element = createTextElement(doc, (TextConfig) config);
                break;
            default:
                System.out.println("不支持的图形类型: " + config.getType());
                return null;
        }
        return element;
    }

4.4 创建元素对象

矩形元素

private static Element createRectElement(Document doc, RectConfig config) {
        Element rect = doc.createElement("rect");
        rect.setAttribute("id", config.getId());
        rect.setAttribute("x", String.valueOf(config.getX()));
        rect.setAttribute("y", String.valueOf(config.getY()));
        rect.setAttribute("width", String.valueOf(config.getWidth()));
        rect.setAttribute("height", String.valueOf(config.getHeight()));
        rect.setAttribute("fill", config.getFill());

        if (config.getRx() > 0) {
            rect.setAttribute("rx", String.valueOf(config.getRx()));
        }
        if (config.getRy() > 0) {
            rect.setAttribute("ry", String.valueOf(config.getRy()));
        }
        if (!"none".equals(config.getStroke())) {
            rect.setAttribute("stroke", config.getStroke());
            rect.setAttribute("stroke-width", config.getStrokeWidth());
        }
        return rect;
    }

文本元素

private static Element createTextElement(Document doc, TextConfig config) {
        Element text = doc.createElement("text");
        text.setAttribute("id", config.getId());
        text.setAttribute("x", String.valueOf(config.getX()));
        text.setAttribute("y", String.valueOf(config.getY()));
        text.setAttribute("fill", config.getFill());
        text.setAttribute("font-family", config.getFontFamily());
        text.setAttribute("font-size", config.getFontSize());
        text.setTextContent(config.getContent());
        return text;
    }

4.5 保存svg文件

通过XML转换器工厂，配置输出属性（启用xml缩进、保留xml声明等），将svg的dom对象输出到文件中，完成dom到xml文件的转换。

private static void saveSvgFile(Document doc, String filename) throws Exception {
        TransformerFactory transformerFactory = TransformerFactory.newInstance();
        Transformer transformer = transformerFactory.newTransformer();

        // 设置输出属性
        transformer.setOutputProperty(OutputKeys.INDENT, "yes");
        phptransformer.setOutputProperty("{http://xml.apache.org/XSLT}indent-amount", "2");
        transformer.setOutputProperty(OutputKeys.OMIT_XML_DECLARATION, "no");
        transformer.setOutputProperty(OutputKeys.ENCODING, "UTF-8");

        // 写入文件
        DOMSource source = new DOMSource(doc);
        StreamResult result = new StreamResult(new File(filename));
        transformer.transform(source, result);
    }

总结

本文仅仅介绍了如何生成一个简单的svg图，而Apache的Batik还有很多操作svg图的操作，例如解析一个已有的svg图，然后进行修改等操作，实际应用中不会如此简单的操作。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程客栈(www.devze.com)。

java实现SVG图创建全过程

目录

前言

一、SVG是什么？

二、生成一个svg图

1. 引入依赖

2. 图形配置类

2.1 svg图形基类

2.2 矩形子类

2.3 文本子类

3. svg面板类

4. 创建svg图

4.1 定义属性

4.2 初始化svg的dom

4.3 添加图形元素

4.4 创建元素对象

4.5 保存svg文件

总结

精彩评论

关注公众号

热门标签

图文推荐

java实现SVG图创建全过程

目录

前言

一、SVG是什么？

二、生成一个svg图

1. 引入依赖

2. 图形配置类

2.1 svg图形基类

2.2 矩形子类

2.3 文本子类

3. svg面板类

4. 创建svg图

4.1 定义属性

4.2 初始化svg的dom

4.3 添加图形元素

4.4 创建元素对象

4.5 保存svg文件

总结

更多 开发 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多开发相关资讯：