SVG.外部<symbol/>__测试

1、ZC：是对文章“SVG.外部<symbol/>（https://www.cnblogs.com/h5skill/p/9070854.html）”的内容的测试

　　1.1、ZC：测试的是 这个方式：“<use x="0" y="0" xlink:herf="外部文件.svg#修饰ID">”

　　1.2、ZC：测试结果：

　　　　(1)、chrome中打开本地文件时，报错：“Unsafe attempt to load URL file:///E:/Project_SVG/ExternalSymbol_symbol.svg#externalSymbol_circle from frame with URL file:///E:/Project_SVG/ExternalSymbol.svg. 'file:' URLs are treated as unique security origins.”

　　　　　　它说外部文件通过URL被认为是唯一的安全来源。（也就是说 本地文件可能不可靠不安全）

　　　　(2)、把这2个文件放到 tomcat中去，然后再用chrome访问 --> 未测试

　　　　(3)、“Qt532x86 MSVC2010 OpenGL” 弄的 WebView测试程序中 打开本地的测试文件 --> 一切OK

2、

3、测试代码：

　　3.1、包含 外部<symbol/> 的文件 （ExternalSymbol_symbol.svg）

<?xml version="1.0" encoding="UTF-8"?>
<svg width="1000" height="800" viewBox="-500 -200 1000 800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:cge="http://iec.ch/TC57/2005/SVG-schema#" xmlns:hzsvg="http://holleygrid.cn/svg">

    <defs>
    <symbol id="externalSymbol_circle">
        <circle cx="20" cy="20" r="20" fill="black" />
    </symbol>
    </defs>

    <rect x="-500" y="-200" width="100%" height="100%" stroke="red" stroke-width="3" fill="none"/>

    <use x="10" y="10" width="80" height="80" xlink:href="#externalSymbol_circle" />

</svg>
<?DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"?>

　　3.2、调用 外部<symbol/> 的文件 （ExternalSymbol.svg）

<?xml version="1.0" encoding="UTF-8"?>
<svg width="1000" height="800" viewBox="-500 -200 1000 800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:cge="http://iec.ch/TC57/2005/SVG-schema#" xmlns:hzsvg="http://holleygrid.cn/svg">

    <defs>
    <symbol id="test1">
        <rect x="0" y="0" width="100" height="80" fill="red" />
    </symbol>
    </defs>

    <rect x="-500" y="-200" width="100%" height="100%" stroke="red" stroke-width="3" fill="none"/>

    <use x="10" y="10" width="100" height="80" xlink:href="#test1" />

    <use x="-400" y="-100" width="80" height="80" xlink:href="ExternalSymbol_symbol.svg#externalSymbol_circle" />

</svg>
<?DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"?>

 

4、html5 svg 第九章 裁剪和屏蔽 Clipping and Masking - 2030的专栏 - CSDN博客.html（https://blog.csdn.net/lcy132100/article/details/9722583）

　　ZC：这篇文章中 也有 引用外部 symbol的代码：

　　　　<use xlink:href="ksymbol.svg#ksymbol"/>

　　　　<use xlink:href="minicat.svg#cat" style="clip-path: url(#rectClip);"/>

　　ZC：格式 确实是这样：<use xlink:href="外部svg文件名#外部svg文件中的symbol的id"/>

5、