README

为 SilverStripe 模板提供基本的 SVG 支持

要求

SilverStripe 4 或更高版本

安装

composer require stevie-mayhew/silverstripe-svg

配置

您可以设置存储 SVG 的基本路径。您还可以为 SVG 输出添加额外的默认类

StevieMayhew\SilverStripeSVG\SVGTemplate:
  base_path: 'themes/base/production/svg/'
  default_extra_classes:
    - 'svg-image'

使用方法

在 SilverStripe 模板中，只需调用 SVG 模板助手即可。

<!-- add svg -->
{$SVG('name')}
<!-- add svg with id 'testid' -->
{$SVG('with-id', 'testid')}

还有用于宽度、高度、大小、填充、添加额外类、设置自定义/替代基本路径以及指定基本路径中的子文件夹的辅助函数（对于想要对图像进行分类和文件夹整理的用户）。

<!-- change width -->
{$SVG('name').width(200)}

<!-- change height -->
{$SVG('name').height(200)}

<!-- change size (width and height) -->
{$SVG('name').size(100,100)}

<!-- change fill -->
{$SVG('name').fill('#FF9933')}

<!-- change stroke -->
{$SVG('name').stroke('#FF9933')}

<!-- add class -->
{$SVG('name').extraClass('awesome-svg')}

<!-- specify a custom base path -->
{$SVG('name').customBasePath('assets/Uploads/SVG')}

<!-- specify a sub-folder of the base path (can be called multiple times) -->
{$SVG('name').addSubfolder('MyDir')}
{$SVG('name').addSubfolder('MyDir/MyOtherDir')}
{$SVG('name').addSubfolder('MyDir').addSubfolder('MyOtherDir')}

这些选项也可以链式调用。

{$SVG('name').fill('#45FABD').width(200).height(100).extraClass('awesome-svg').customBasePath('assets/Uploads/SVG').addSubfolder('MyDir')}

示例输出

<svg xmlns="http://www.w3.org/2000/svg" viewBox="248.5 0 464.8 560" enable-background="new 248.5 0 464.8 560" class="svg-name"><path d="M550.9 0H248.5v560h464.8V154.9L550.9 0zM648 149.3H534.1V41.1L648 149.3zm22.4 369.6H289.6V41.1h205.3v149.3h177.3v328.5h-1.8zM343.7 272.5h272.5v41.1H343.7zM343.7 369.6h272.5v41.1H343.7z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="248.5 0 464.8 560" enable-background="new 248.5 0 464.8 560" class="svg-with-id svg-test-id" id="test-id"><path d="M550.9 0H248.5v560h464.8V154.9L550.9 0zM648 149.3H534.1V41.1L648 149.3zm22.4 369.6H289.6V41.1h205.3v149.3h177.3v328.5h-1.8zM343.7 272.5h272.5v41.1H343.7zM343.7 369.6h272.5v41.1H343.7z"></path></svg>