能否直接将SVG文件中的代码包含到Twig模板文件中?
就像这样:
{% include 'my.svg' %}
这将导致:
<svg viewbox=".... />
能否直接将SVG文件中的代码包含到Twig模板文件中?
就像这样:
{% include 'my.svg' %}
这将导致:
<svg viewbox=".... />
完成此任务的一种方法:
{{ source('my.svg') }}
点击此处了解更多: https://www.theodo.fr/blog/2017/01/integrating-and-interacting-with-svg-image-files-using-twig/
如果涉及到主题,使用{{ directory }}
变量是一个不错的选择,它保存了主题路径。
{{ source(directory ~ '/images/my.svg') }}
我遇到了类似的问题,最终将我的svg文件重命名为.twig文件。
{% include 'my.svg.twig' %}
对我来说,它起作用了:
{% include '/images/my.svg' %}
如果您正在使用Drupal 8,并且之前给出的代码不起作用,这里有一个快速更新:
我是这样做的:
function theme_preprocess_page(&$variables) {
$svg = file_get_contents(drupal_get_path('theme', 'theme_name') . '/images/my.svg');
$variables['some_svg'] = $svg;
}
raw
过滤器输出内容,否则将转义SVG标记:{{ some_svg|raw }}
twig函数source()在Drupal中运行良好。我不确定使用source()还是include更好,但Symfony文档建议使用include()函数而不是指令。https://twig.symfony.com/doc/3.x/tags/include.html
我还发现添加主题命名空间有助于告诉Twig查找模板目录。
假设:
{{ source('@theme_name/svg/sprite.svg') }}
{# or #}
{% include '@theme_name/svg/sprite.html.twig' %}
{# or #}
{{ include('@theme_name/svg/sprite.html.twig') }}
这对我在Drupal 9中有效:
{% include active_theme_path() ~ '/images/sprite.svg' %}
您可以通过设置新变量在Drupal8主题中实现:
function theme_preprocess_page(&$variables) {
$svg = file_get_contents(drupal_get_path('theme', 'socialbase') . '/images/icons.svg');
$variables['svg_sprite'] = t('svg', array('svg' => $svg));
}
{{ svg_sprite }}