如何包装SVG内容



我想在我的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>

这是我的小提琴。

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

您可以将代码放在functions.php文件中,

请检查以下代码-

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

试试看!!

最新更新