通过 img src 属性中的 id 引用内联 svg

Question

是否有一种语法允许我通过 img 标签的 src 属性中的 id 引用内联 svg？

或者是否可以将 svg 代码直接回显到 src 属性中？

如果可能的话，我希望避免创建重复的文件和重复的 HTTP 请求。

对于之前加载的 id = #my_svg" 的 svg，我尝试过：

src =“网址（#my_svg）”

我还尝试将 svg 直接从服务器打印到 src 属性中，如下所示：

<img src="data:image/svg+xml;utf8,
<?php
$svg_str = logo_svg();
$svg_str = str_replace('"', "'", $svg_str);
echo $svg_str;
?>
" 
style="position:absolute;width:100%;height:100%">
</img>

Answer 1

兄弟，不幸的是，标签的 src 属性不支持引用文档的内部元素（如内联 SVG ID）。

但是，还有其他方法可以内联嵌入 SVG，而无需复制文件或发出额外的 HTTP 请求。

使用内联元素：您可以直接在 HTML 中插入 SVG 代码。这可以避免文件重复和额外的 HTTP 请求。

<svg id="meu_svg" width="100" height="100">
    <!-- Conteúdo do SVG -->
</svg>

使用标签：您可以使用标签来引用文档本身内联的 SVG。

<svg width="100" height="100">
    <use xlink:href="#meu_svg"></use>
</svg>

通过 JavaScript 插入 SVG：如果您希望将 SVG 单独保留在代码中并将其动态插入到 HTML 中。

<div id="svg_container"></div>

<script>
    document.getElementById('svg_container').innerHTML = `
        <svg id="meu_svg" width="100" height="100">
            <!-- Conteúdo do SVG -->
        </svg>
    `;
</script>

在标签的 src 中使用 data:image/svg+xml：可以将 SVG 代码直接嵌入到标签的 src 属性中，将 SVG 编码为数据 URL。

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red' /></svg>" />