在 PHP 服务器端加载 SVG 文件答案

【问题标题】：Load SVG file on PHP server side在 PHP 服务器端加载 SVG 文件
【发布时间】：2015-03-13 11:04:19
【问题描述】：

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

模型.php

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

之后，我将$svgTag 加载到视图中。
查看.php

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

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

<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>

【问题讨论】：

标签： php codeigniter svg

【解决方案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> 的真棒答案？

【讨论】：

是的，我已经知道那个标签，但是我不能将 css 应用到 SVG，因为它来自外部源代码。

【解决方案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>'

【讨论】：