php - 包含一个 SVG 文件并改变它的高度

Question

我有一个 SVG 文件，我想使用 php include 'svg/file.svg'; 问题是，我希望能够在我包含时为该 SVG 设置高度

所以我想我会做一个函数:

function importSVG($file, $height) {
    $svg = file_get_contents($file);

    // magic to set height?

    return $svg;
}

但是我不知道如何设置高度属性。我可能每页使用此功能 20-30 次。所以我不想对整个 SVG 代码进行正则表达式处理，因为有些 SVG 文件很大。

示例 SVG 文件:

<svg><path d="M.524 7.42C-.318 8.846.342 10 2 10h7c1.657 0 2.317-1.156 1.476-2.58L6.516.72c-.56-.95-1.473-.947-2.032 0l-3.96 6.7z"></path></svg>

Answer 1

您可以避免修改 SVG，而且如果您使用符号技术，您只需在页面中包含它一次。

确保您的 SVG 有一个 viewBox 并将其转换为如下符号:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">

  <symbol id="my-icon" viewBox="0 0 100 100">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>

</svg>

然后，当您需要使用它时，将以下内容添加到您的页面:

<svg class="icon-small">
  <use xlink:href="#my-icon" />
</svg>

该类定义为:

.icon-small {
  width: 32px;
  height: 32px;
}

然后如果你需要更大的版本，你可以这样做:

<svg class="icon-large">
  <use xlink:href="#my-icon" />
</svg>

.icon-large {
  width: 48px;
  height: 48px;
}

.icon-small {
    width: 32px;
    height: 32px;
}

    
.icon-large {
    width: 48px;
    height: 48px;
}

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
      
    <symbol id="my-icon" viewBox="0 0 100 100">
       <circle cx="50" cy="50" r="45" fill="blueviolet" stroke="orange" stroke-width="6"/>
    </symbol>
      
</svg>


<h1> Example </h1>

<svg class="icon-small">
  <use xlink:href="#my-icon" />
</svg>

<svg class="icon-large">
  <use xlink:href="#my-icon" />
</svg>