如何包装SVG内容？

Question

我想在我的WordPress站点中使用SVG。这个SVG的内容将会改变，我希望它是动态的：

下面是我的代码：

<div style="height:60px;" class="gmr_main_page_svg_div">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="6773 1755 730 81" style="height:60px;" class="gmr_main_page_svg">
  <defs>
    <style>
      .cls-1 {
        clip-path: url(#clip-iPhone_6_7_8_1);
      }

      .cls-2 {
        fill: #0652fd;
      }

      .cls-3, .cls-4 {
        fill: none;
        stroke: #0652fd;
      }

      .cls-3 {
        stroke-width: 3px;
      }

      .cls-4 {
        stroke-width: 4px;
      }

      .cls-5 {
        fill: #fff;
        font-size: 25px;
        font-family: IRANSans-Bold, IRANSans;
        font-weight: 700;
      }

      .cls-6 {
        fill: rgba(255,255,255,0);
      }
    </style>
    <clipPath id="clip-iPhone_6_7_8_1">
      <rect x="6773" y="1755" width="900" height="81"/>
    </clipPath>
  </defs>
  <g id="iPhone_6_7_8_1" data-name="iPhone 6/7/8 – 1" class="cls-1">
    <rect class="cls-6" x="6773" y="1755" width="730" height="81"/>
    <g id="Group_2830" data-name="Group 2830" transform="translate(6586 1751)">
      <path id="Path_3672" data-name="Path 3672" class="cls-2" d="M1319.065,1810h189.586v-69.9h-131.61Z" transform="translate(-593 -1732)"/>
      <path id="Path_3673" data-name="Path 3673" class="cls-3" d="M1319.065,1810h189.586v-69.9h-131.61Z" transform="translate(-600 -1736)"/>
      <line id="Line_108" data-name="Line 108" class="cls-4" x1="728" transform="translate(187.5 76.5)"/>
    </g>
    <text id="خدمات_ما" data-name="خدمات ما" class="cls-5" transform="translate(7376 1779)"><tspan x="130.443" y="22">ویژگی‌های طراحی لوگو</tspan></text>
  </g>
</svg>


</div>

这是我的fiddle。

我使用了一些图像到SVG的转换器，这是我的图像的输出。

Answer 1

你可以把代码放在functions.php文件上，

​

function cc_mime_types($mimes) {
 $mimes['svg'] = 'image/svg+xml';
 return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

​

试试吧！！