如何为svg元素路径提供背景颜色?

时间:2017-07-14 10:40:42

标签: html css svg svg.js

我已将图像转换为svg并获取路径向量,如下所示

  <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="122.000000pt" height="98.000000pt" viewBox="0 0 122.000000 98.000000"
  preserveAspectRatio="xMidYMid meet">
 <metadata>
 Created by potrace 1.14, written by Peter Selinger 2001-2017
 </metadata>
 <g transform="translate(0.000000,98.000000) scale(0.100000,-0.100000)"
 fill="#000000" stroke="none">

 <path d="M93 873 c-7 -3 -6 -653 0 -660 5 -4 889 -185 892 -181 1 1 35 69 74
 151 l71 147 0 273 0 272 -515 0 c-283 0 -518 -1 -522 -2z m1007 -284 l0 -251
 -66 -139 c-59 -122 -70 -138 -88 -134 -12 3 -106 23 -211 46 -104 22 -219 47
 -255 54 -36 8 -85 21 -109 30 -24 8 -56 15 -70 15 -15 0 -49 7 -75 16 -26 9
 -58 14 -71 12 -15 -3 -26 0 -29 9 -4 8 -6 145 -6 304 l0 289 490 0 490 0 0
 -251z" style="fill:green;background-color:red"/>

 </g>
 </svg>

我想要的是用任何颜色填充颜色的路径但是当我使用填充时它只改变边框的颜色而不是完整路径节点的内部颜色。 我试过了

style="fill:green;background-color:red"

但不能仅仅改变边界而不是内心? 这里是jsfiddle链接Link to example可以任何正文转换并用颜色填充路径吗?

1 个答案:

答案 0 :(得分:4)

问题是你的$conn = mysqli_connect($_SERVER['RDSEndpointwithport'], $_SERVER['username'], $_SERVER['password'], $_SERVER['databasename']); // Check connection if (mysqli_connect_errno()){ echo "Failed to connect to MySQL: " . mysqli_connect_error(); die('Mysql connection error'); } else{ echo "Connection Established"; } 没有任何“内在”。您的SVG实际上就是您所说的边框。您无法为内部设置颜色,因为它不是SVG的一部分。

图像中指定了一个“洞”。这是代码中以SVG开头并以m1007结尾的路径 - 由于规范:“M表示移动,...并且z表示关闭路径”“..如果删除部分你将拥有整个形状与内部的差距。

https://jsfiddle.net/norin89/qhqa4kyq/4/