TYPO3 DCE（流体）：如何生成 SVG 对象而不是图像标签？答案

【问题标题】：TYPO3 DCE (Fluid): How to generate an SVG Object instead of an image tag?TYPO3 DCE（流体）：如何生成 SVG 对象而不是图像标签？
【发布时间】：2017-05-13 13:41:51
【问题描述】：

我们的 TYPO3 用户（编辑）需要将 SVG 文件交换/更新到 TYPO3 网站。 svg 文件是可点击的，因此<img> html 标记对它们不起作用。我们决定支持 <object> 标记，使用 <img> 后备 (Do I use <img>, <object>, or <embed> for SVG files?)。

前端的Fluid代码很容易生成正常的img标签：

<f:layout name="Default" />
<f:section name="main">
 <div class="container">
  <f:for each="{dce:fal(field:'image1', contentObject:contentObject)}" as="fileReference" iteration="iterator">
   <f:if condition="{iterator.isFirst}">
    <f:image src="{fileReference.uid}" alt="" treatIdAsReference="1" />
   </f:if>
  </f:for>
 </div>
</f:section>

但是，根据FluidTYPO3 vhs ViewHelper for SVG Images?，我也许可以使用这样的流体代码：

<img src="{f:uri.image(src: 'uploads/tx_myext/{imgIcon}')}">

适用于对象的应该是：

<object data="{f:uri.image(src: 'xxx')}" type="image/svg+xml">
  <img src="{f:uri.image(src: 'xxx')}">
</object>

不幸的是，我不知道作为 src 提供什么。 {fileReference.uid} 只插入文件的唯一 id（一个数字）。

如何将文件id转换为图片的相对或绝对URI？

【问题讨论】：

这是什么意思？ “svg 文件是可点击的，因此 html 标记对它们不起作用。”
感谢您的提示。我忘了``标记html标签，所以这些是不可见的。我的意思是 html 标签<img> 对他们不起作用。现在编辑问题。

标签： html svg typo3 fluid tx-dce

【解决方案1】：

我认为 viewhelper 属性 treatIdAsReference 是您正在寻找的。 f:image 和 f:uri:image 可以处理文件和文件引用。

看起来你有一个 FileReference，所以你应该添加值为 1 的属性下面是一个内联符号的例子：

{f:uri.image(src: '{fileReference.uid}', treatIdAsReference:'1')}

结果是你的文件的路径，它可以用在普通的 HTML-Tags 中。

【讨论】：