PHP不加载SVG图案纹理

Question

我在处理一些 SVG 和 PHP 代码时，发现了一个我无法解决的非常烦人的问题。
我有一个带有一些形状的 SVG 图像。使用fill 属性和def 标签，我可以通过一个简单的GET 变量成功地将纹理应用于所需的形状。所以这是我的 SVG：

而且，如果我想应用任何纹理，我可以完美地看到它：

所以，问题是，当我使用 img 标签嵌入图像时，我看不到纹理。
我已经配置了一个 PHP 文件，所以如果我将一些值传递给文件，我可以更改颜色和纹理。例如：

• test.php?color=FF0000 将用红色方块渲染我的图像
• test.php?pat=pat1 将使用我在模式文件夹中的模式呈现我的图像

如果我想显示图像，这很好用，但是，如果我把它放在 img 标记中，它只适用于颜色，所以：

• <img src="test.php?color=FF0000"> 将成功地用红色方块渲染我的图像
• <img src="test.php?pat=pat1"> 不会渲染我的纹理；它以白色显示正方形

这是我的test.php 文件（带有 SVG 代码的 PHP）：

<?php
header('Content-type: image/svg+xml');
echo '<?xml version="1.0" encoding="utf-8"?>';
?>
<svg version="1.1" id="figure" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 612 345" style="enable-background:new 0 0 612 345;" xml:space="preserve">
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
            <image xlink:href="img/patterns/<?=isset($_GET['pat']) ? $_GET['pat'] : 'pat1'?>.jpg" x="0" y="0" width="100" height="100" />
        </pattern>
    </defs>
<style type="text/css">
    .st0{stroke:#000000;stroke-miterlimit:10;}
    .st1{fill:#62C3A9;stroke:#000000;stroke-miterlimit:10;}
    .st2{fill:#B8D433;stroke:#000000;stroke-miterlimit:10;}
</style>
    <rect fill="<?=isset($_GET['color']) ? '#' . $_GET['color'] : 'url(#img1)'?>" id="square" x="142.3" y="63" class="st0" width="125.3" height="167.3"/>
    <ellipse id="round" class="st1" cx="319.3" cy="134.7" rx="47" ry="53"/>
    <polygon id="polygon" class="st2" points="327,237.7 261.5,268.4 202.2,227.1 208.3,155 273.8,124.3 333.1,165.6 "/>
</svg>

我错过了什么？我已经尝试了一个小时来寻找解决方案，但我还没有找到任何有用的东西。

这是我检查图像时在 Chrome 开发控制台上获得的预览，左侧带有颜色，右侧带有纹理。

谢谢！

Answer 1

当您将 SVG 显示为图像（即通过标签或背景图像）时，它必须在单个文件中完整，即不允许外部引用。

你必须转换外部图像

xlink:href="img/patterns/<?=isset($_GET['pat']) ? $_GET['pat'] : 'pat1'?>.jpg"

输入data URI 以使其正常工作。