`

Java学习:使用DOM写XML - 绘制中国国旗的SVG文件

    博客分类:
  • Java
 
阅读更多
http://my.oschina.net/Tsybius2014/blog/543026
下面代码可以绘制出一个SVG格式的中华人民共和国国旗。SVG文件参考了维基百科上的中国国旗SVG文件。

(https://zh.wikipedia.org/wiki/中华人民共和国国旗#/media/File:Flag_of_the_People's_Republic_of_China.svg)

Java代码如下:
package XmlGenerateTest;
 
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
 
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;
import javax.xml.transform.Transformer;
import javax.xml.transform.TransformerConfigurationException;
import javax.xml.transform.TransformerException;
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.TransformerFactoryConfigurationError;
import javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;
 
import org.w3c.dom.Document;
import org.w3c.dom.Element;
 
/**
 * 使用DOM绘制中国国旗的SVG文件
 * @author Tsybius2014
 * @date 2015年12月11日
 * @time 下午11:15:19
 * @remark
 *
 */
class XmlGenerateTest {
 
    /**
     * 使用DOM绘制中国国旗的SVG文件
     * @param args
     */
    public static void main(String[] args) {
 
        try {
            DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
            factory.setNamespaceAware(true);
            DocumentBuilder builder = factory.newDocumentBuilder();
            //生成SVG
            Document doc = builder.newDocument();
            String namespace = "http://www.w3.org/2000/svg";
            Element elementSvg = doc.createElementNS(namespace, "svg");
            elementSvg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
            elementSvg.setAttribute("width", "900");
            elementSvg.setAttribute("height", "600");
            elementSvg.setAttribute("viewBox", "0 0 30 20");
            doc.appendChild(elementSvg);
            Element elementDef = doc.createElement("defs");
            elementSvg.appendChild(elementDef);
            Element elementPath = doc.createElement("path");
            elementPath.setAttribute("id", "s");
            elementPath.setAttribute("d", 
                "M0,-1 0.587785,0.809017 -0.951057,-0.309017H0.951057L-0.587785,0.809017z");
            elementPath.setAttribute("fill", "#ffde00");
            elementDef.appendChild(elementPath);
            Element elementRect = doc.createElement("rect");
            elementRect.setAttribute("width", "30");
            elementRect.setAttribute("height", "20");
            elementRect.setAttribute("fill", "#de2910");
            elementSvg.appendChild(elementRect);
            Element elementUse1 = doc.createElement("use");
            elementUse1.setAttribute("xlink:href", "#s");
            elementUse1.setAttribute("transform", "translate(5,5) scale(3)");
            elementSvg.appendChild(elementUse1);
            Element elementUse2 = doc.createElement("use");
            elementUse2.setAttribute("xlink:href", "#s");
            elementUse2.setAttribute("transform", "translate(10,2) rotate(23.036243)");
            elementSvg.appendChild(elementUse2);
            Element elementUse3 = doc.createElement("use");
            elementUse3.setAttribute("xlink:href", "#s");
            elementUse3.setAttribute("transform", "translate(12,4) rotate(45.869898)");
            elementSvg.appendChild(elementUse3);
            Element elementUse4 = doc.createElement("use");
            elementUse4.setAttribute("xlink:href", "#s");
            elementUse4.setAttribute("transform", "translate(12,7) rotate(69.945396)");
            elementSvg.appendChild(elementUse4);
            Element elementUse5 = doc.createElement("use");
            elementUse5.setAttribute("xlink:href", "#s");
            elementUse5.setAttribute("transform", "translate(10,9) rotate(20.659808)");
            elementSvg.appendChild(elementUse5);
            //输出到文件
            File file = new File("C:\\Users\\Tsybius\\Desktop\\FlagOfPRC.svg");
            Transformer t = TransformerFactory.newInstance().newTransformer();
            t.transform(new DOMSource(doc), new StreamResult(new FileOutputStream(file)));
        } catch (ParserConfigurationException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (TransformerConfigurationException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (TransformerFactoryConfigurationError e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (FileNotFoundException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (TransformerException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
}

生成的XML内容如下:

<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" height="600" viewBox="0 0 30 20" width="900" xmlns="http://www.w3.org/2000/svg"><defs><path d="M0,-1 0.587785,0.809017 -0.951057,-0.309017H0.951057L-0.587785,0.809017z" fill="#ffde00" id="s"/></defs><rect fill="#de2910" height="20" width="30"/><use transform="translate(5,5) scale(3)" xlink:href="#s"/><use transform="translate(10,2) rotate(23.036243)" xlink:href="#s"/><use transform="translate(12,4) rotate(45.869898)" xlink:href="#s"/><use transform="translate(12,7) rotate(69.945396)" xlink:href="#s"/><use transform="translate(10,9) rotate(20.659808)" xlink:href="#s"/></svg>


经过格式化后的XML变为这样:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="600" viewBox="0 0 30 20" width="900" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <path d="M0,-1 0.587785,0.809017 -0.951057,-0.309017H0.951057L-0.587785,0.809017z" fill="#ffde00" id="s" />
    </defs>
    <rect fill="#de2910" height="20" width="30" />
    <use transform="translate(5,5) scale(3)" xlink:href="#s" />
    <use transform="translate(10,2) rotate(23.036243)" xlink:href="#s" />
    <use transform="translate(12,4) rotate(45.869898)" xlink:href="#s" />
    <use transform="translate(12,7) rotate(69.945396)" xlink:href="#s" />
    <use transform="translate(10,9) rotate(20.659808)" xlink:href="#s" />
</svg>

这个文件(FlagOfPRC.svg)使用IE8打开,效果如下:

分享到:
评论

相关推荐

    如何使用vite-svg-loader

    "使用 Vite-SVG-Loader 实现 SVG 图像的轻量级引入" 在现代 Web 开发中,使用 SVG 图像已经成为一个非常常见的需求,特别是在 Vue 应用程序中。然而,引入 SVG 图像经常会遇到一些问题,例如图像大小问题、浏览器...

    jaxb-svg11-1.0.2-API文档-中文版.zip

    标签:plutext、svg11、中文文档、jar包、java; 使用方法:解压翻译后的API文档,用浏览器打开“index.html”文件,即可纵览文档内容。 人性化翻译,文档中的代码和结构保持不变,注释和说明精准翻译,请放心使用。

    save-ps-to-svg 1.0.zip

    在数字艺术与设计领域,Photoshop(简称PS)是一款广泛使用的图像处理软件,而SVG(Scalable Vector Graphics)则是一种基于XML的矢量图形格式,尤其适用于网页设计和需要缩放不失真的应用场景。本文将详细讲解如何...

    jaxb-svg11-1.0.2-API文档-中英对照版.zip

    标签:plutext、jaxb、svg11、中英对照文档、jar包、java; 使用方法:解压翻译后的API文档,用浏览器打开“index.html”文件,即可纵览文档内容。 人性化翻译,文档中的代码和结构保持不变,注释和说明精准翻译,请...

    Android-ChinaMap利用xml解析SVG文件绘制中国省份地图

    本文将详细介绍如何在Android项目中利用XML解析SVG文件来绘制中国省份地图。 SVG是一种基于XML的矢量图格式,它允许开发者通过文本编辑器创建和编辑图形,同时支持动画和交互性。在Android中,我们可以借助Android...

    save-ps-to-svg1.0.jsx 让Ps支持svg格式

    用户只需确保按照指示正确安装,并根据教程学习如何使用,就可以享受到这个脚本带来的便利,将Photoshop的矢量图形作品保存为高质量、可缩放的SVG文件。 总的来说,这个脚本提供了一种扩展Photoshop功能的方法,...

    save-ps-to-svg1.0.jsx.zip

    标题“save-ps-to-svg1.0.jsx.zip”表明这是一个压缩包文件,其中包含一个名为“save-ps-to-svg1.0.jsx”的脚本。这个脚本主要用于将Adobe Photoshop(PS)中的设计元素,尤其是形状,导出为可缩放矢量图形(SVG)...

    世界266个国家的国旗 SVG 图标1X1和 4x3 全球国家国旗svg格式 国家svg图

    世界所有国家的国旗 SVG 图标 共266国家 1X1和 4x3 格式 文件命名为 国家缩写 (ad.svg)

    react-native-svg-parser:解析SVG文件并将其转换为'react-native-svg'格式的对象。 笔记

    创建该项目是为了使其易于与项目一起使用现有的SVG文件,该项目仅支持SVG的一个子集,并且不提供直接从SVG / XML格式文件呈现SVG的方法。 安装 npm i @target-corp/react-native-svg-parser 用法 import ...

    iOS-多媒体-绘制不同的SVG图形-4Macaw

    本文将深入探讨如何在iOS应用中使用4Macaw库来绘制不同的SVG图形。 首先,让我们了解SVG的基本概念。SVG是一种基于XML的图形语言,其特点是图像可以无损放大,不失真,适合用于图标、插图等需要精细细节和清晰边缘...

    dom-to-svg:用于将给定HTML DOM节点转换为可访问的SVG“屏幕截图”的库

    import { documentToSVG , elementToSVG , inlineResources , formatXML } from 'dom-to-svg' // Capture the whole document const svgDocument = documentToSVG ( document ) // Capture specific element const ...

    Java SSM框架集成的日志功能增强Demo源码

    - XML配置文件:16个 - JavaScript脚本:9个 - SVG图像文件:7个 - CSS样式表:3个 - EOT字体文件:3个 - TTF字体文件:3个 - WOFF字体文件:3个 - WOFF2字体文件:3个 - Git忽略配置:2个 项目简述: 本...

    漂亮图标SVG150-css3-svg-icons

    "漂亮图标SVG150-css3-svg-icons"是一个集合,包含150个高质量、美观的图标,这些图标设计用于Web开发,特别是与CSS3和SVG技术相结合。 SVG(Scalable Vector Graphics)是一种基于XML的矢量图像格式,它允许无损...

    batik-svg-dom-1.6-1.jar

    官方版本,亲测可用

    CSS-DOM-XML-程序员

    在“程序员大本营.Net版”中,可能涵盖了如何在.NET环境中使用CSS、DOM和XML的知识,以及如何利用.NET Framework或.NET Core开发Web应用。自学这个资源,你将学习到如何将这些技术整合到实际项目中,提升你的编程...

    使用batik转换svg文件

    Batik提供了一系列的Java工具类,如`SVGGraphics2D`用于绘制SVG图形,`SVGConverter`用于转换SVG文件。这些工具类可以通过Java API直接调用,集成到你的项目中。例如,你可以创建一个`SVGGraphics2D`实例,然后使用...

    dom4解析xml需要的包

    1. **解析XML**:DOM4J支持使用DOM、SAX或StAX解析器读取XML文件,其中DOM是将整个XML文档加载到内存中,适用于小型文件;SAX是事件驱动的解析,适用于大文件;而StAX则提供了一种更高效的方式,通过迭代器逐个处理...

    vue-svg:Vue.js 的超级简单 svg 加载模块

    sprite - 使用svg-sprite-loader导入(alpha 实现)安装使用新的 ,就像导航到您的项目并运行一样简单: $ vue add svg 而已! 你准备好了!用法使用示例记录为: &lt;!-- Vue.js code --&gt; &lt;!-- Outputted ...

Global site tag (gtag.js) - Google Analytics