blocks|key|3156521|text|<svg>元素没有xlink:href属性，如果需要包含外部图像，请使用<image>元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3156522|entityMap^0|0|5|9|A|10|7|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

<p><code>&lt;svg&gt;</code> element doesn't have <code>xlink:href</code> attribute, if you need to include an external image use the <code>&lt;image&gt;</code> element.</p>


blocks|key|254540|text|根据您linked+to的SVG规范中的定义：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|254541|254542|+CSS2选择器不能应用于(概念上)克隆的DOM树，因为它的内容不是正式文档结构的一部分。|blockquote|254543|254544|254545|这意味着1.svg中的选择器不适用于克隆的DOM树。|254546|那么为什么不直接引用another.svg中的样式表呢？这应该适用于所有浏览器，并且适用于<use>和<image>。|style|CODE|254547|另一种选择是在主SVG文档(1.svg)中设置<use>元素的样式，因为样式也从那里级联到克隆树。|254548|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/SVG/struct.html#UseElement^0|3|9|0|0|0|0|0|0|0|19|5|1F|7|0|N|5|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|D|3|-4|5|6|7|13|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|14|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|15|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|16|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|17|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|18|8|@$A|19|B|1A|N|O]|$A|1B|B|1C|N|O]]|9|@]|C|$]]|$1|P|3|Q|5|6|7|1D|8|@$A|1E|B|1F|N|O]]|9|@]|C|$]]|$1|R|3|-4|5|6|7|1G|8|@]|9|@]|C|$]]]|S|$T|$5|U|V|W|C|$X|Y]]]]

<p>From the definition in the SVG spec that you <a href="http://www.w3.org/TR/SVG/struct.html#UseElement" rel="noreferrer">linked to</a>: </p>

<blockquote>
  <p>CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree
  because its contents are not part of the formal document structure.</p>
</blockquote>

<p>That means that your selector in 1.svg doesn't apply to the cloned DOM tree.</p>

<p>So why not simply reference the stylesheet from another.svg instead? That should work in all browsers, and with both <code>&lt;use&gt;</code> and <code>&lt;image&gt;</code>.</p>

<p>Another option is to style the <code>&lt;use&gt;</code> element in the main svg document (1.svg), since style is cascaded down to the cloned tree from there too.</p>


blocks|key|3156544|text|试着这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3156545|正方形：|3156546|<?xml+version="1.0"+encoding="UTF-8"+standalone="no"?>
<svg+xmlns="http://www.w3.org/2000/svg"+xmlns:xlink="http://www.w3.org/1999/xlink"++++width="1000"+height="1000">
++++<rect+x="558.5"+y="570"+width="5"+height="5"+id="rectangle"+/>
</svg>|code-block|syntax|javascript|3156547|使用它：|3156548|<?xml+version="1.0"+encoding="UTF-8"+standalone="no"?>
<?xml-stylesheet+href="style.css"+type="text/css"?>
<svg+xmlns="http://www.w3.org/2000/svg"+xmlns:xlink="http://www.w3.org/1999/xlink"++++width="1000"+height="1000">
++++<use+xlink:href="another.svg#rectangle"+class="blue"/>
</svg>|3156549|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Try to do it this way:</p>

<p>The square:</p>

<pre><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"    width="1000" height="1000"&gt;
    &lt;rect x="558.5" y="570" width="5" height="5" id="rectangle" /&gt;
&lt;/svg&gt;
</code></pre>

<p>Use it:</p>

<pre><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
&lt;?xml-stylesheet href="style.css" type="text/css"?&gt;
&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"    width="1000" height="1000"&gt;
    &lt;use xlink:href="another.svg#rectangle" class="blue"/&gt;
&lt;/svg&gt;
</code></pre>


blocks|key|256429|text|这回答了最初的问题，但也试图从更广泛的角度回答在SVG中引用外部SVG文件的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|256430|缺少SVG支持|256431|六年后，SVG和Safari仍然不允许引用/加载外部文件。|offset|length|style|BOLD|256432|这就是为什么<use+xlink:href="another.svg#rectangle"+class="blue"/>可以在火狐中工作，而不能在WebKit浏览器中工作。|CODE|256433|所有内容都在一个文件中|256434|如果项目负担得起，只需将所有SVG文件放在一个父HTML或SVG文件中。这样，它将在所有三个浏览器中工作：|256435|256436|Example+1+·+Both+SVGs+in+one+file+(SVG)|unordered-list-item|256437|Example+2+·+Both+SVGs+in+one+file+(HTML)|256438|256439|但话说回来，它并不是真正的外部，承认吧！|256440|为了从缓存中获益并避免重复，我们希望将可重复的内容保存在外部文件中。|256441|解决方法:通过JavaScript插入外部SVG文件|256442|将样式和定义保存在一个SVG文件中，将SVG几何图形保存在其他文件中，然后简单地通过JavaScript从后者加载前者。|256443|纯SVG和纯JavaScript|256444|定义我们希望能够使用的内容。styles-and-defs.svg|256445|<svg+xmlns="http://www.w3.org/2000/svg"+xmlns:xlink="http://www.w3.org/1999/xlink">
++++<style+type="text/css"+>
++++<![CDATA[

++++.blue+{+fill:+blue;+}

++++]]>
++++</style>

++++<defs>
++++++++<rect+id="rectangle"+class="blue"+width="50"+height="50"+/>
++++</defs>
</svg>|code-block|syntax|javascript|256446|使用上面创建的几何图形，并加载其定义。parent.svg|256447|<svg+version="1.1"
++++baseProfile="full"
++++xmlns="http://www.w3.org/2000/svg"
++++xmlns:xlink="http://www.w3.org/1999/xlink"
++++xmlns:ev="http://www.w3.org/2001/xml-events"
++++width="420"+height="120">

++++<use+xlink:href="#rectangle"+x="10"+y="10"+/>

++++<script><![CDATA[

++++++++/**+When+the+document+is+ready,+this+self-executing+function+will+be+run.+**/
++++++++(function()+{

++++++++++++var+ajax+=+new+XMLHttpRequest();
++++++++++++ajax.open("GET",+"styles-and-defs.svg",+true);
++++++++++++ajax.send();

++++++++++++/**
+++++++++++++*+Append+the+external+SVG+to+this+very+SVG.
+++++++++++++*
+++++++++++++*+Notice+the+use+of+an+SVG+selector+on+the+document+derived+from+the+AJAX+result.
+++++++++++++*++This+is+because+the+full+document+cannot+be+included+directly+into+the+SVG.
+++++++++++++*++Trying+to+include+to+do+so+would+result+in:
+++++++++++++*++++++`HierarchyRequestError:+Node+cannot+be+inserted+at+the+specified+point+in+the+hierarchy`+in+Firefox;
+++++++++++++*++++++`Nodes+of+type+'#document'+may+not+be+inserted+inside+nodes+of+type+'svg'.`+in+Chrome.
+++++++++++++*/
++++++++++++ajax.onload+=+function(e)+{
++++++++++++++++var+parser+=+new+DOMParser();
++++++++++++++++var+ajaxdoc+=+parser.parseFromString(+ajax.responseText,+"image/svg%2Bxml"+);
++++++++++++++++document.getElementsByTagName('svg')[0].appendChild(+ajaxdoc.getElementsByTagName('svg')[0]+);
++++++++++++}

++++++++})();+++/*+END+(anonymous+function)+*/

++++]]></script>
</svg>|256448|这就回答了这个问题。|256449|在HTML中|256450|与纯SVG相同的基本方法：|256451|<!DOCTYPE+html>
<html>

<head>
++++<meta+charset="utf-8">
++++<meta+name="viewport"+content="width=device-width,+initial-scale=1.0">
++++<title>
++++++++Load+external+SVG+(HTML)
++++</title>
++++<meta+name="author"+content="Fabien+Snauwaert">
</head>

<body>

++++<svg+version="1.1"
++++baseProfile="full"
++++xmlns="http://www.w3.org/2000/svg"
++++xmlns:xlink="http://www.w3.org/1999/xlink"
++++xmlns:ev="http://www.w3.org/2001/xml-events"
++++width="420"+height="120">
++++++++<use+xlink:href="#rectangle"+x="10"+y="10"++/>
++++</svg>

<script>

++++/**+When+the+document+is+ready,+this+self-executing+function+will+be+run.+**/
++++(function()+{

++++++++var+ajax+=+new+XMLHttpRequest();
++++++++ajax.open("GET",+"styles-and-defs.svg",+true);
++++++++ajax.send();

++++++++/**
+++++++++*+Append+the+external+SVG+to+this+very+SVG.
+++++++++*
+++++++++*+Notice+the+use+of+an+SVG+selector+on+the+document+derived+from+the+AJAX+result.
+++++++++*++This+is+because+the+full+cannot+be+included+directly+into+the+SVG.
+++++++++*++Trying+to+include+to+do+so+would+result+in:
+++++++++*++++++`HierarchyRequestError:+Node+cannot+be+inserted+at+the+specified+point+in+the+hierarchy`+in+Firefox;
+++++++++*++++++`Nodes+of+type+'#document'+may+not+be+inserted+inside+nodes+of+type+'svg'.`+in+Chrome.
+++++++++*/
++++++++ajax.onload+=+function(e)+{
++++++++++++var+parser+=+new+DOMParser();
++++++++++++var+ajaxdoc+=+parser.parseFromString(+ajax.responseText,+"image/svg%2Bxml"+);
++++++++++++document.getElementsByTagName('body')[0].appendChild(+ajaxdoc.getElementsByTagName('svg')[0]+);
++++++++}

++++})();+++/*+END+(anonymous+function)+*/

</script>

</body>
</html>|256452|当然，您也可以使用jQuery+(或者为什么不使用优秀的D3.js)来加载文件。|256453|备注|256454|256455|注意<defs>的使用。我相信这是拥有一个外部SVG的好处，你可以保持一切整洁和有条理。(如果没有它，我们将显示两次内容。)|256456|我去掉了style.css，只将CSS放在样式和定义文件中。|256457|如果在HTML版本中，您观察到父SVG和窗口边框之间有一个间隙，这是因为“看不见”的SVG+(带有样式和定义)像任何其他SVG一样，是一个inline元素。要消除这种差距，只需在该SVG.|256458|Download+all+examples+here.|256459|上设置style="display:+block;"|256460|256461|SVG很棒，但可能看起来支持得太少，而它确实允许一些很棒的事情。我希望这能对一些人有所帮助。|256462|在OS+X+10.12.6上测试正常：|256463|59.0.2|256464|Chrome+66.0.3359.139|256465|
|256466|Safari+11.0.1+|256467|Firefox+|256468|256469|256470|entityMap|0|LINK|mutability|MUTABLE|url|https://www.dropbox.com/s/j6mhvs2xh0ajwsm/allinone.svg?dl=0|1|https://codepen.io/fabswt/pen/gzRGpv|2|http://d3js.org/|3|https://www.dropbox.com/sh/b2ntwxwkfau023w/AAA3xIjBLl0GlX_3IXTfDOG_a?dl=0^0|0|0|Q|2|0|6|1I|0|0|0|0|0|13|0|0|0|14|1|0|0|0|N|B|0|0|0|0|E|J|0|0|J|A|0|0|0|0|0|0|S|5|2|0|0|0|2|6|0|4|9|0|1X|6|0|0|Q|3|0|3|N|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|30|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|31|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|32|8|@$F|33|G|34|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|35|8|@$F|36|G|37|H|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|38|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|39|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|3A|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|3B|8|@]|9|@$F|3C|G|3D|1|3E]]|A|$]]|$1|U|3|V|5|T|7|3F|8|@]|9|@$F|3G|G|3H|1|3I]]|A|$]]|$1|W|3|-4|5|6|7|3J|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|3K|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|3L|8|@$F|3M|G|3N|H|I]]|9|@]|A|$]]|$1|11|3|12|5|6|7|3O|8|@]|9|@]|A|$]]|$1|13|3|14|5|6|7|3P|8|@]|9|@]|A|$]]|$1|15|3|16|5|6|7|3Q|8|@]|9|@]|A|$]]|$1|17|3|18|5|6|7|3R|8|@$F|3S|G|3T|H|L]]|9|@]|A|$]]|$1|19|3|1A|5|1B|7|3U|8|@]|9|@]|A|$1C|1D]]|$1|1E|3|1F|5|6|7|3V|8|@$F|3W|G|3X|H|L]]|9|@]|A|$]]|$1|1G|3|1H|5|1B|7|3Y|8|@]|9|@]|A|$1C|1D]]|$1|1I|3|1J|5|6|7|3Z|8|@]|9|@]|A|$]]|$1|1K|3|1L|5|6|7|40|8|@]|9|@]|A|$]]|$1|1M|3|1N|5|6|7|41|8|@]|9|@]|A|$]]|$1|1O|3|1P|5|1B|7|42|8|@]|9|@]|A|$1C|1D]]|$1|1Q|3|1R|5|6|7|43|8|@]|9|@$F|44|G|45|1|46]]|A|$]]|$1|1S|3|1T|5|6|7|47|8|@]|9|@]|A|$]]|$1|1U|3|-4|5|6|7|48|8|@]|9|@]|A|$]]|$1|1V|3|1W|5|T|7|49|8|@$F|4A|G|4B|H|L]]|9|@]|A|$]]|$1|1X|3|1Y|5|T|7|4C|8|@$F|4D|G|4E|H|L]]|9|@]|A|$]]|$1|1Z|3|20|5|T|7|4F|8|@$F|4G|G|4H|H|L]]|9|@]|A|$]]|$1|21|3|22|5|T|7|4I|8|@]|9|@$F|4J|G|4K|1|4L]]|A|$]]|$1|23|3|24|5|6|7|4M|8|@$F|4N|G|4O|H|L]]|9|@]|A|$]]|$1|25|3|-4|5|6|7|4P|8|@]|9|@]|A|$]]|$1|26|3|27|5|6|7|4Q|8|@]|9|@]|A|$]]|$1|28|3|29|5|6|7|4R|8|@]|9|@]|A|$]]|$1|2A|3|2B|5|6|7|4S|8|@]|9|@]|A|$]]|$1|2C|3|2D|5|T|7|4T|8|@]|9|@]|A|$]]|$1|2E|3|2F|5|6|7|4U|8|@]|9|@]|A|$]]|$1|2G|3|2H|5|T|7|4V|8|@]|9|@]|A|$]]|$1|2I|3|2J|5|T|7|4W|8|@]|9|@]|A|$]]|$1|2K|3|-4|5|6|7|4X|8|@]|9|@]|A|$]]|$1|2L|3|-4|5|6|7|4Y|8|@]|9|@]|A|$]]|$1|2M|3|-4|5|6|7|4Z|8|@]|9|@]|A|$]]]|2N|$2O|$5|2P|2Q|2R|A|$2S|2T]]|2U|$5|2P|2Q|2R|A|$2S|2V]]|2W|$5|2P|2Q|2R|A|$2S|2X]]|2Y|$5|2P|2Q|2R|A|$2S|2Z]]]]

<p>This answers the original question, but attempts to answer the matter of referencing external SVG files in SVG in broader terms, too.</p>

<h1>Lack of SVG support</h1>

<p>Six years later, <strong>Chrome and Safari still do not allow for the referencing/loading of external SVG files</strong>.</p>

<p>This is why <code>&lt;use xlink:href="another.svg#rectangle" class="blue"/&gt;</code> works in Firefox, but not in WebKit browsers.</p>

<h1>All in one file</h1>

<p>If the project can afford it, simply put all of the SVG files in one parent HTML or SVG file. This way, it'll work in all three browsers:</p>

<ul>
<li><a href="https://www.dropbox.com/s/j6mhvs2xh0ajwsm/allinone.svg?dl=0" rel="noreferrer">Example 1 · Both SVGs in one file (SVG)</a></li>
<li><a href="https://codepen.io/fabswt/pen/gzRGpv" rel="noreferrer">Example 2 · Both SVGs in one file (HTML)</a></li>
</ul>

<p>But then, it's not really external, granted!</p>

<p><strong>To benefit from caching and avoid repeating oneself, we'd like to keep repeatable SVG content in an external file.</strong></p>

<h1>Work around: insert the external SVG file via JavaScript</h1>

<p>Keep the styles and definitions in one SVG file, keep the SVG geometry in some other file, and simply load the former from the latter via JavaScript.</p>

<h2>In pure SVG and pure JavaScript</h2>

<p>Define what we'd like to be able to use. <code>styles-and-defs.svg</code>:</p>

<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
    &lt;style type="text/css" &gt;
    &lt;![CDATA[

    .blue { fill: blue; }

    ]]&gt;
    &lt;/style&gt;

    &lt;defs&gt;
        &lt;rect id="rectangle" class="blue" width="50" height="50" /&gt;
    &lt;/defs&gt;
&lt;/svg&gt;
</code></pre>

<p>Use the geometry created above, and load its definition. <code>parent.svg</code>:</p>

<pre><code>&lt;svg version="1.1"
    baseProfile="full"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:ev="http://www.w3.org/2001/xml-events"
    width="420" height="120"&gt;

    &lt;use xlink:href="#rectangle" x="10" y="10" /&gt;

    &lt;script&gt;&lt;![CDATA[

        /** When the document is ready, this self-executing function will be run. **/
        (function() {

            var ajax = new XMLHttpRequest();
            ajax.open("GET", "styles-and-defs.svg", true);
            ajax.send();

            /**
             * Append the external SVG to this very SVG.
             *
             * Notice the use of an SVG selector on the document derived from the AJAX result.
             *  This is because the full document cannot be included directly into the SVG.
             *  Trying to include to do so would result in:
             *      `HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy` in Firefox;
             *      `Nodes of type '#document' may not be inserted inside nodes of type 'svg'.` in Chrome.
             */
            ajax.onload = function(e) {
                var parser = new DOMParser();
                var ajaxdoc = parser.parseFromString( ajax.responseText, "image/svg+xml" );
                document.getElementsByTagName('svg')[0].appendChild( ajaxdoc.getElementsByTagName('svg')[0] );
            }

        })();   /* END (anonymous function) */

    ]]&gt;&lt;/script&gt;
&lt;/svg&gt;
</code></pre>

<p>This answers the OP.</p>

<h2>In HTML</h2>

<p>Same basic approach as in pure SVG:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;
        Load external SVG (HTML)
    &lt;/title&gt;
    &lt;meta name="author" content="Fabien Snauwaert"&gt;
&lt;/head&gt;

&lt;body&gt;

    &lt;svg version="1.1"
    baseProfile="full"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:ev="http://www.w3.org/2001/xml-events"
    width="420" height="120"&gt;
        &lt;use xlink:href="#rectangle" x="10" y="10"  /&gt;
    &lt;/svg&gt;

&lt;script&gt;

    /** When the document is ready, this self-executing function will be run. **/
    (function() {

        var ajax = new XMLHttpRequest();
        ajax.open("GET", "styles-and-defs.svg", true);
        ajax.send();

        /**
         * Append the external SVG to this very SVG.
         *
         * Notice the use of an SVG selector on the document derived from the AJAX result.
         *  This is because the full cannot be included directly into the SVG.
         *  Trying to include to do so would result in:
         *      `HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy` in Firefox;
         *      `Nodes of type '#document' may not be inserted inside nodes of type 'svg'.` in Chrome.
         */
        ajax.onload = function(e) {
            var parser = new DOMParser();
            var ajaxdoc = parser.parseFromString( ajax.responseText, "image/svg+xml" );
            document.getElementsByTagName('body')[0].appendChild( ajaxdoc.getElementsByTagName('svg')[0] );
        }

    })();   /* END (anonymous function) */

&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>You could of course use jQuery (or why not the excellent <a href="http://d3js.org/" rel="noreferrer">D3.js</a>) to load the file instead.</p>

<h3>Remarks</h3>

<ul>
<li>Mind the use of <code>&lt;defs&gt;</code>. I believe this is the nice thing about having an external SVG, you can keep everything neat and organized. (And without it, we'd be displaying the content twice.)</li>
<li>I got rid of <code>style.css</code> and simply put the CSS inside of the styles-and-defs file.</li>
<li>If, in the HTML version, you observe a gap between the parent SVG and the window borders, this is because the "invisible" SVG (with the styles and definition), like any other SVG, is an <code>inline</code> element. To get rid of this gap, simply set <code>style="display: block;"</code> on that SVG.</li>
<li><a href="https://www.dropbox.com/sh/b2ntwxwkfau023w/AAA3xIjBLl0GlX_3IXTfDOG_a?dl=0" rel="noreferrer">Download all examples here</a>.</li>
</ul>

<hr>

<p><em>SVG is great but can appear to be too little supported, while it does allow for some great things. I hope this helps some folks out there.</em></p>

<p><em>Tested OK on OS X 10.12.6 in:</em></p>

<ul>
<li><em>Firefox 59.0.2</em></li>
<li><em>Chrome  66.0.3359.139</em></li>
<li><em>Safari 11.0.1</em></li>
</ul>


<p>Hello I am working on an svg/js map, which consists of many little svg graphics (City districts). I put every graphic into an own file so that my main svg file will still be maintainable and not bloated.</p>

<p>How can I reference an external svg file from another svg correctly?</p>

<p>Expected result: Open 1.svg in a browser and see a blue rectangle.
How it should work: <a href="http://www.w3.org/TR/SVG/struct.html#UseElement" rel="noreferrer">w3c: use element</a></p>

<p>So this is what I tried:
1.svg:</p>

<pre><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
&lt;?xml-stylesheet href="style.css" type="text/css"?&gt;
&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-       20010904/DTD/svg10.dtd"&gt;
&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"    width="1000" height="1000"&gt;
&lt;use xlink:href="another.svg#rectangle"/&gt;
&lt;/svg&gt;
</code></pre>

<p>another.svg:</p>

<pre><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-       20010904/DTD/svg10.dtd"&gt;
&lt;svg id="rectangle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"    width="1000" height="1000"&gt;
&lt;rect class="blue" x="558.5" y="570" width="5" height="5" /&gt;
&lt;/svg&gt;
</code></pre>

<p>style.css</p>

<pre><code>.blue { fill: blue; }
</code></pre>

<p>Result:</p>

<ul>
<li>Firefox: A blue rectangle (exactly what I wanted)</li>
<li>Chrome: <strong>Nothing</strong></li>
<li>Opera: <strong>Black</strong> rectangle</li>
</ul>

<p>Note: I tried it with the image element but that didn't work with the stylesheets i.e. I got a black rectangle not a blue one.</p>

<p><strong>Important:</strong> When you want to reference another SVG <strong>and</strong> want to have the referenced SVG to be part of the formal document structure, you can <a href="http://wiki.svg.org/index.php/XMLHttpRequest" rel="noreferrer">use AJAX</a> to do that.</p>

<p><a href="https://bugs.webkit.org/show_bug.cgi?id=12499" rel="noreferrer">https://bugs.webkit.org/show_bug.cgi?id=12499</a></p>


How to reference external svg file in svg correctly?

jQuery

您好，我正在处理一个svg/js地图，其中包含许多小svg图形(城市地区)。我将每个图形放到一个自己的文件中，这样我的主svg文件仍然是可维护的，不会臃肿。如何从另一个svg正确引用外部svg文件？预期结果:在浏览器中打开1.svg并看到一个蓝色矩形。它的工作原理：所以我试了一下: 1.svg：<?xml versio...

问如何在svg中正确引用外部svg文件？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在svg中正确引用外部svg文件？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在svg中正确引用外部svg文件？
EN