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，以便工作。

PHP没有加载SVG模式纹理

1 个答案: