在 PHP 服务器端加载 SVG 文件

Question

我想根据参数加载svg文件。
例如，如果参数 = A，则加载 A.svg，如果参数 = B，则加载 B.svg，依此类推。
对于这种情况，我使用的是 Codeigniter，所以在模型上我加载 svg 文件是这样的：

Model.php

$svgTag = '<div id="svg-content" >' 
          . '<input type="radio" name="test"/>'
          . file_get_contents( APPPATH. 'views/svg/'.$param.'.svg', TRUE)
          . '</div>'

之后，我在视图中加载 $svgTag。
View.php

<html>
   <body>
      <?php echo $svgTag; ?>
   </body>
</html>

我的期望是 svg 文件将在 div#svg-content 中加载，但实际结果是 svg 在标记 <body> 之后加载，如下所示：
结果

<html>
   <body>
      <svg>........</svg> <!-- Loaded SVG File -->
      <div id="svg-content" >
         <input type="radio" name="test"/>
      </div>
   </body>
</html>

我想在单选按钮上添加事件，如果它被点击，然后更改 SVG 图像的颜色。
如果我使用 <object> 我不能应用这种风格。

注意：这是我尝试加载的文件内容：

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        viewBox="0 0 1280 800" enable-background="new 0 0 1280 800" xml:space="preserve">
    <g>
        <polygon points="358.3,524.2 328.3,524.2 328.3,665 415,665 415,640 358.3,640    "/>
    </g>
</svg>

有没有办法得到这样的结果..?

<html>
   <body>
      <div id="svg-content" >
         <input type="radio" name="test"/>
         <svg>........</svg> <!-- Loaded SVG File -->
      </div>
   </body>
</html>

Answer 1

使用 <img> 标签将其嵌入页面，这样您就可以完全控制 html

中的展示位置

$svgTag = '<div id="svg-content" >' 
      . '<input type="radio" name="test"/>'
      . '<img src="'.APPPATH. 'views/svg/'.$param.'.svg'.'" alt="">'
      . '</div>'

Here is SVG 文件使用 <img>、<object> 或 <embed> 的绝妙答案？

Answer 2

终于找到答案了
它应该使用 fread() 函数来加载 SVG 文件。
所以，它应该是这样的：

$fh = fopen(APPPATH. 'views/svg/'.$param.'.svg', 'r');
$svg_file = fread($fh, 25000);
$svgTag = '<div id="svg-content" >' 
           . '<input type="radio" name="test"/>'
           . $svg_file
           . '</div>'

在 PHP 服务器端加载 SVG 文件

Load SVG file on PHP server side

php

svg

codeigniter