SVG - 定位不起作用答案

【问题标题】：SVG - positioning won't workSVG - 定位不起作用
【发布时间】：2015-08-26 22:22:00
【问题描述】：

我是 SVG 新手。我认为有两种方法可以在我的 wordpress 模板中插入 SVG 图标。

1.: 用“使用”

<svg viewBox="0 0 100 100">
    	    <use xlink:href="<?php bloginfo('template_directory'); ?>/icons/download.svg#Layer_1"></use>
    	</svg>

2.: 作为 PHP 文件

get_template_part("icons/download")

(在这种情况下，“get_template_part”指的是一个带有绘制 SVG 的 XML 代码的“icon.php”文件：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="40px" height="33.999px" viewBox="0 0 40 33.999" style="enable-background:new 0 0 40 33.999;" xml:space="preserve">
<path style="fill-rule:evenodd;clip-rule:evenodd;" d="M39,14h-1v15.999c0,2.209-1.791,4-4,4H6c-2.209,0-4-1.791-4-4V14H1
	c-0.552,0-1-0.448-1-1c0-0.552,0.448-1,1-1h1v-0.001h2v18c0,1.104,0.895,2,2,2h28c1.104,0,2-0.896,2-2v-18h2V12h1
	c0.552,0,1,0.448,1,1C40,13.552,39.552,14,39,14z M20.708,13.706c-0.001,0.001-0.002,0.002-0.003,0.002l-0.009,0.009l0,0l0,0
	c-0.087,0.087-0.189,0.147-0.294,0.196c-0.005,0.002-0.009,0.007-0.014,0.009c-0.369,0.163-0.814,0.098-1.117-0.205l-4.989-4.994
	c-0.394-0.394-0.394-1.033,0-1.427c0.394-0.394,1.032-0.394,1.426,0L19,10.591V1c0-0.552,0.448-1,1-1c0.552,0,1,0.448,1,1v9.56
	l3.261-3.264c0.393-0.394,1.031-0.394,1.425,0s0.394,1.033,0,1.427L20.708,13.706z"/>
</svg>

第一个选项在没有 javascript 的 IE（甚至 11！）中不起作用。

第二个选项适用于 IE9 及更高版本，太酷了！但我无法定位此 SVG。我把它放在一个包装器（“.svg-wrapper”）中，并试图用 CSS 定位它，但 SVG 出现在 DOM 的包装器之外:-(

我在这里做错了吗？

echo '<li class="alignmiddle"><a href="' . $url . '" class="download cf">' . '<div class="svgwrapper">' . get_template_part("icons/download") . '</div>' . $title . '.' . $path_info['extension'] . '<span class="filesize">&nbsp;(' . $filesize . ')</span>' . '</a></li>';

或者有更好的解决方案吗？

【问题讨论】：

标签： php css wordpress svg

【解决方案1】：

我使用以下代码为旧浏览器定义回退。此方法允许您以与普通图像相同的方式应用 CSS。由于 SVG 是基于矢量的，因此您必须指定宽度和高度。

<img src="<?php bloginfo('template_directory'); ?>/img/example.svg" onerror="this.onerror=null; this.src='<?php bloginfo('template_directory'); ?>/img/example.png'" alt="" />

【讨论】：

我不能这样做，因为我使用 CMS，客户应该能够为主题中的图标选择颜色。当我使用“img src”时，我无法使用“color：# ...”或“fil：# ...”来执行此操作。