如果我有一个不是图像而是定义集合的 svg 文件，我可以将其称为外部文件吗？

Question

我有一长串定义字符形状的路径。 或多或少有128条路径。 路径在

<defs>

列表中定义，稍后使用

<use>

元素进行引用。

我想将路径的定义移动到一个单独的文件，本着使用

<style></style>

将我们的

<link rel="stylesheet" href="mystyles.css">

部分移动到单独文件的精神。 svg 文件可以实现这样的功能吗？

请注意，这不是图像。 使用

<img src=...>

似乎不太合适。

. . . 
    <svg xmlns="http://www.w3.org/2000/svg">
        <defs>
            <!-- capital_A -->
            <g id="ascii41" fill-rule="nonzero" transform="translate(0.25,2.90)">
                <path
                    d="M 6.144 10.112 L 3.744 2.832 L 1.328 10.112 L 0 10.112 L 3.568 0 L 3.952 0 L 7.52 10.112 L 6.144 10.112 Z M 5.248 6.384 L 5.52 7.392 L 1.808 7.392 L 2.048 6.384 L 5.248 6.384 Z" />
            </g>
            <!-- capital_B -->
            <g id="ascii42" fill-rule="evenodd" transform="translate(0.70,3.00)">
                <path
                    d="M 2.896 9.968 L 0 9.968 L 0 0 L 2.912 0 Q 3.776 0 4.416 0.176 A 3.608 3.608 0 0 1 4.933 0.359 Q 5.238 0.496 5.472 0.68 A 2.133 2.133 0 0 1 5.925 1.162 A 1.937 1.937 0 0 1 6.088 1.456 . . . Z" />
            </g>
            <!-- capital_C -->
            <g id="ascii43" fill-rule="evenodd" transform="translate(0.60,2.95)">
                <path
                    d="M 6.96 1.952 L 5.936 2.544 L 5.792 2.608 L 5.744 2.496 Q 5.776 2.368 5.728 2.256 Q 5.68 2.144 5.552 1.92 A 3.009 3.009 0 0 0 5.285 1.617 Q 5.028 1.364 4.76 1.248 Q 4.352 1.072 3.904 1.072 . . . Z" />
            </g>
            . . . 
        </defs>
    </svg>

    <svg xmlns="http://www.w3.org/2000/svg">
        <g id="group-of-uses">
        </g>
    </svg>

    <script>
. . . 
                //     Insert the new character. 
                let use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
                use.setAttribute('href', `#ascii${asciiCode.toString(16)}`);
                groupOfUses.insertBefore(use, currentUse);
. . . 

Answer 1

显然，html include 是被放入标准中，然后又被取出来的。 我怀疑是因为大多数人都使用服务器，如果您使用服务器，您只需在服务器端插入文件即可。 我专门从事客户端工作。

我做了一个对我有用的愚蠢的解决方案。 不确定它是否适用于其他人。

这是您的主 html 文件的内容：

<script src="replace_script_with_html_character_definitions.js"></script>

这是发出主 html 文件引用的replace_script_with_html_character_definitions.js 文件的js 文件：

var fs = require('fs');

var basenameOfHtmlFile = process.argv[2];

var contentsOfHtmlFile = fs.readFileSync(`${basenameOfHtmlFile}.html`, 'utf8');

var contentsOfJsFile = `var elt = document.querySelector('script[src="replace_script_with_html_${basenameOfHtmlFile}.js"]');
elt.outerHTML = \`${contentsOfHtmlFile}\`;
`;

fs.writeFileSync(`replace_script_with_html_${basenameOfHtmlFile}.js`, contentsOfJsFile);

调用js文件的方法如下：

node replace_script_with_html_generate.js character_definitions

然后你的目录又多了一个文件：

-rw-r--r--  1 rickhedin  staff    96K Oct 25 12:46 replace_script_with_html_character_definitions.js
-rw-r--r--  1 rickhedin  staff    96K Oct 25 12:41 character_definitions.html
-rw-r--r--  1 rickhedin  staff   410B Oct 25 12:38 replace_script_with_html_generate.js