SVG和WordPress自定义字段

以下是Ian Marquette的来宾帖子。 Ian了解到SVG可以包含<text>元素，这意味着文本可以来自动态来源，同时仍然可以对其进行定制的SVG定制内容。

我最近在一个基于WordPress的网站上工作，该网站需要一个信息图。 作为响应式设计的支持者，我在Illustrator中绘制了信息图，然后将其导出到SVG以实现可伸缩性。 在后台修改时，我发现您可以将WordPress自定义字段添加到SVG文本元素中，从而可以从WordPress CMS中控制基于文本的内容。 那有多棒？

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

准备SVG文件

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

我的SVG文件。 请注意，路径是演示一些独特的SVG。 可能是过滤器，中风或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>

这是一些路径文本的实时演示：

在CodePen上查看Chris Coyier （ @chriscoyier ）的Pen JoakC 。

您可以直接将标记复制并粘贴到WordPress模板中。 您还可以在页面上使用SVG的其他方法之一，例如将文件链接为对象。 本质上，它必须是嵌入式SVG，而不是用作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动态吐出文本的内容。

自定义字段已添加到您的SVG

一旦进入，就可以像常规标记一样设置样式。 例如：

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

.text-path {
  fill: orange;
}

或任何其他SVG CSS属性 。 这意味着通过@ font-face使用自定义字体就可以了。 您还可以使用一些不错的功能，例如SVG过滤器和动画。

翻译自: https://css-tricks.com/svg-wordpress-custom-fields/