SVG 和 WordPress 自定义字段

以下是 Ian Marquette 的客座文章。 Ian 发现 SVG 可以拥有一个 <text> 元素，这意味着文本可以来自动态源，同时仍然能够对其执行很酷的自定义 SVG 特定操作。

我最近在一个基于 WordPress 的网站上工作，该网站需要一个信息图表。 作为响应式设计的支持者，我在 Illustrator 中绘制了信息图表，并将其导出为 SVG 以实现可扩展性。 在后端四处摸索时，我发现您可以将 WordPress 自定义字段添加到 SVG 文本元素，这些字段允许您从 WordPress CMS 中控制基于文本的内容。 这真是太棒了！

在这里，我将解释我是如何做到的，以及您可能会发现有用的其他一些选项。

准备 SVG 文件

在您选择的矢量编辑软件中创建图形。 在您想要包含用户控制文本的区域添加占位符文本。 在这里，我创建了一个简单的图形以进行演示。

现在使用您喜欢的编辑器打开您的 SVG 文件。 您需要对代码进行一些更改。 在我的示例中，该路径必须更改为 <textpath>，并被赋予一个 ID，并使用 xlink 链接。 如果我没有这样做，文本中的每个字符都会有自己的标签、坐标等。

<svg width="1000px" height="300px" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="MyPath"
          d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>

  <use xlink:href="#MyPath" fill="none" stroke="green"  />

  <text font-family="Helvetica" font-size="42.5">
    <textPath xlink:href="#MyPath">
      SVG Text on a path for WordPress!
    </textPath>
  </text>

</svg>

这是一个在路径上显示一些文本的实时演示

查看 Pen JoakC by Chris Coyier (@chriscoyier) on CodePen.

您可以直接将标记复制粘贴到 WordPress 模板中。 您也可以使用其他方法在页面上使用 SVG，例如将文件链接为对象。 从本质上讲，它需要是内联 SVG，而不是用作 或 background-image 的 SVG。

您需要用以下代码替换 <text> 标签之间的内容，将 custom_field 替换为您想要给它起的名字

<?php
  global $wp_query;
  $postid = $wp_query->post->ID;
  echo get_post_meta($postid, 'custom_field', true);
  wp_reset_query();
?>

将其放到 SVG 中将看起来像这样

<svg width="1000px" height="300px" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <path id="MyPath"
          d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>

  <use xlink:href="#MyPath" fill="none" stroke="green"  />

  <text font-family="Helvetica" font-size="42.5">
    <textPath xlink:href="#MyPath">
       <?php
        global $wp_query;
        $postid = $wp_query->post->ID;
        echo get_post_meta($postid, 'custom_field', true);
        wp_reset_query();
       ?>
    </textPath>
  </text>

</svg>

现在在 WordPress CMS 中创建具有此标签的自定义字段，并对其进行填充。

现在，如果您查看该页面，您应该会看到自定义文本位于您的自定义 SVG 图形中！ 当然，自定义字段只是一种非常可扩展的实现方式。 您也可以用这种方式使用帖子标题、菜单或任何其他从任何 CMS 中动态输出文本的内容。

一旦它在那里，文本就可以像普通标记一样被样式化。 例如

...
<textpath class="text-path" ... >
  ...

.text-path {
  fill: orange;
}

或任何其他 SVG CSS 属性。 这意味着使用 @font-face 的自定义字体可以正常工作。 您还可以使用 SVG 过滤器和动画等功能。