如何在svg文件中添加纹理

时间：2018-01-06 03:38:38

标签： svg

我有svg边框，我想更改此文件的纹理，如金箔纹理。我怎么能这样做呢？

所以我想添加那个纹理： enter image description here

＆＃13;
＆＃13; 
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-445 277.9 68.6 7.1" style="enable-background:new -445 277.9 68.6 7.1;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#d5a000;}
</style>
<path id="XMLID_4_" class="st0" d="M-376.4,278.8c0,0-1.1,0-2.9,0.1c-0.9,0-2.1,0.1-3.4,0.1c-1.3,0-2.8,0.1-4.4,0.1  c-6.4,0-15,0-23.6,0s-17.2,0-23.6,0c-1.6-0.2-3.1-0.2-4.4-0.3c-1.3,0-2.4,0-3.4-0.1c-1.8,0-2.9-0.1-2.9-0.1s1.1,0,2.9-0.1  c0.9,0,2.1-0.1,3.4-0.1c1.3,0,2.8-0.1,4.4-0.1c6.4,0,15,0,23.6,0c8.6,0,17.2,0,23.6,0c1.6,0,3.1,0,4.4,0.1c1.3,0,2.4,0.1,3.4,0.1  C-377.4,278.7-376.4,278.8-376.4,278.8z"/>
<path id="XMLID_2_" class="st0" d="M-392.6,283.1c0,0-0.2,0-0.5,0.1c-0.2,0-0.4,0.1-0.6,0.1c-0.2,0-0.5,0.1-0.8,0.1  c-1.2,0-2.8,0-4.4,0s-3.2,0-4.4,0c-0.3,0-0.6,0-0.8-0.1c-0.2,0-0.5-0.1-0.6-0.1c-0.3-0.1-0.5-0.1-0.5-0.1s0.2,0,0.5-0.1  c0.2,0,0.4-0.1,0.6-0.1c0.2,0,0.5-0.1,0.8-0.1c1.2,0,2.8,0,4.4,0s3.2,0,4.4,0c0.3,0,0.6,0,0.8,0.1c0.2,0,0.5,0.1,0.6,0.1  C-392.8,283.1-392.6,283.1-392.6,283.1z"/>
<path id="XMLID_1_" class="st0" d="M-416.8,283.1c0,0-0.2,0-0.5,0.1c-0.2,0-0.4,0.1-0.6,0.1c-0.2,0-0.5,0.1-0.8,0.1  c-1.2,0-2.8,0-4.4,0s-3.2,0-4.4,0c-0.3,0-0.6,0-0.8-0.1c-0.2,0-0.5-0.1-0.6-0.1c-0.3-0.1-0.5-0.1-0.5-0.1s0.2,0,0.5-0.1  c0.1-0.1,0.4-0.1,0.6-0.1c0.2,0,0.5-0.1,0.8-0.1c1.2,0,2.8,0,4.4,0s3.2,0,4.4,0c0.3,0,0.6,0,0.8,0.1c0.2,0,0.5,0.1,0.6,0.1  C-417,283-416.8,283.1-416.8,283.1z"/>
<circle class="st0" cx="-410.7" cy="283.1" r="1.4"/>
</svg>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

＆＃13;
＆＃13; 
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
width="100%" height="100%" viewBox="0 0 600 400"  >
<style type="text/css">
	.st0{fill:#d5a000;}
</style>
<defs> 

</defs>
<image xlink:href="https://i.stack.imgur.com/V2XAq.jpg" x="0" y="0" height="100%" width="100%" />
<g  transform="scale(6.5) translate(458 -275) ">
<path id="XMLID_4_" class="st0" d="M-376.4,278.8c0,0-1.1,0-2.9,0.1c-0.9,0-2.1,0.1-3.4,0.1c-1.3,0-2.8,0.1-4.4,0.1  c-6.4,0-15,0-23.6,0s-17.2,0-23.6,0c-1.6-0.2-3.1-0.2-4.4-0.3c-1.3,0-2.4,0-3.4-0.1c-1.8,0-2.9-0.1-2.9-0.1s1.1,0,2.9-0.1  c0.9,0,2.1-0.1,3.4-0.1c1.3,0,2.8-0.1,4.4-0.1c6.4,0,15,0,23.6,0c8.6,0,17.2,0,23.6,0c1.6,0,3.1,0,4.4,0.1c1.3,0,2.4,0.1,3.4,0.1  C-377.4,278.7-376.4,278.8-376.4,278.8z"/>
<path id="XMLID_2_" class="st0" d="M-392.6,283.1c0,0-0.2,0-0.5,0.1c-0.2,0-0.4,0.1-0.6,0.1c-0.2,0-0.5,0.1-0.8,0.1  c-1.2,0-2.8,0-4.4,0s-3.2,0-4.4,0c-0.3,0-0.6,0-0.8-0.1c-0.2,0-0.5-0.1-0.6-0.1c-0.3-0.1-0.5-0.1-0.5-0.1s0.2,0,0.5-0.1  c0.2,0,0.4-0.1,0.6-0.1c0.2,0,0.5-0.1,0.8-0.1c1.2,0,2.8,0,4.4,0s3.2,0,4.4,0c0.3,0,0.6,0,0.8,0.1c0.2,0,0.5,0.1,0.6,0.1  C-392.8,283.1-392.6,283.1-392.6,283.1z"/>
<path id="XMLID_1_" class="st0" d="M-416.8,283.1c0,0-0.2,0-0.5,0.1c-0.2,0-0.4,0.1-0.6,0.1c-0.2,0-0.5,0.1-0.8,0.1  c-1.2,0-2.8,0-4.4,0s-3.2,0-4.4,0c-0.3,0-0.6,0-0.8-0.1c-0.2,0-0.5-0.1-0.6-0.1c-0.3-0.1-0.5-0.1-0.5-0.1s0.2,0,0.5-0.1  c0.1-0.1,0.4-0.1,0.6-0.1c0.2,0,0.5-0.1,0.8-0.1c1.2,0,2.8,0,4.4,0s3.2,0,4.4,0c0.3,0,0.6,0,0.8,0.1c0.2,0,0.5,0.1,0.6,0.1  C-417,283-416.8,283.1-416.8,283.1z"/>
<circle class="st0" cx="-410.7" cy="283.1" r="1.4"/>  
</g>
 
</svg>
＆＃13;
＆＃13;
＆＃13;      

线条的背景和颜色几乎合并。

考虑阴影选项。

创建阴影效果：

  • 补丁重复，下部补丁向右和向下移动。

transform="translate(0.20 0.2)"

  • 使用高斯滤镜
    • 模糊了形状的边缘

<filter id="Filtershadow" height="120%" width="120%"> <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> </filter>

以下是完整代码：

＆＃13;
＆＃13; 
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
width="100%" height="100%" viewBox="0 0 600 400"  >
<style type="text/css">
	.st0{fill:#d5a000;}
</style>

<defs>
<filter id="Filtershadow" height="120%" width="120%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="1"/> 
</filter>	  
</defs>	 

<image xlink:href="https://i.stack.imgur.com/V2XAq.jpg" x="0" y="0" height="100%" width="100%" />

<use xlink:href="#lineCircle" />
<g id="lineCircle"  transform="scale(6.5) translate(458 -275) ">
<path id="XMLID_41_" class="st0"  transform="translate(0.3 0.3)"  fill="grey"  filter="url(#Filtershadow)" d="M-376.4,278.8c0,0-1.1,0-2.9,0.1c-0.9,0-2.1,0.1-3.4,0.1c-1.3,0-2.8,0.1-4.4,0.1  c-6.4,0-15,0-23.6,0s-17.2,0-23.6,0c-1.6-0.2-3.1-0.2-4.4-0.3c-1.3,0-2.4,0-3.4-0.1c-1.8,0-2.9-0.1-2.9-0.1s1.1,0,2.9-0.1  c0.9,0,2.1-0.1,3.4-0.1c1.3,0,2.8-0.1,4.4-0.1c6.4,0,15,0,23.6,0c8.6,0,17.2,0,23.6,0c1.6,0,3.1,0,4.4,0.1c1.3,0,2.4,0.1,3.4,0.1  C-377.4,278.7-376.4,278.8-376.4,278.8z"/>     
                                                      
<path id="XMLID_42_" class="st0" d="M-376.4,278.8c0,0-1.1,0-2.9,0.1c-0.9,0-2.1,0.1-3.4,0.1c-1.3,0-2.8,0.1-4.4,0.1  c-6.4,0-15,0-23.6,0s-17.2,0-23.6,0c-1.6-0.2-3.1-0.2-4.4-0.3c-1.3,0-2.4,0-3.4-0.1c-1.8,0-2.9-0.1-2.9-0.1s1.1,0,2.9-0.1  c0.9,0,2.1-0.1,3.4-0.1c1.3,0,2.8-0.1,4.4-0.1c6.4,0,15,0,23.6,0c8.6,0,17.2,0,23.6,0c1.6,0,3.1,0,4.4,0.1c1.3,0,2.4,0.1,3.4,0.1  C-377.4,278.7-376.4,278.8-376.4,278.8z"/>

<path id="XMLID_21_" class="st0"  transform="translate(0.25 0.25)"  fill="grey"  filter="url(#Filtershadow)"  d="M-392.6,283.1c0,0-0.2,0-0.5,0.1c-0.2,0-0.4,0.1-0.6,0.1c-0.2,0-0.5,0.1-0.8,0.1  c-1.2,0-2.8,0-4.4,0s-3.2,0-4.4,0c-0.3,0-0.6,0-0.8-0.1c-0.2,0-0.5-0.1-0.6-0.1c-0.3-0.1-0.5-0.1-0.5-0.1s0.2,0,0.5-0.1  c0.2,0,0.4-0.1,0.6-0.1c0.2,0,0.5-0.1,0.8-0.1c1.2,0,2.8,0,4.4,0s3.2,0,4.4,0c0.3,0,0.6,0,0.8,0.1c0.2,0,0.5,0.1,0.6,0.1  C-392.8,283.1-392.6,283.1-392.6,283.1z"/>     

<path id="XMLID_22_" class="st0"  d="M-392.6,283.1c0,0-0.2,0-0.5,0.1c-0.2,0-0.4,0.1-0.6,0.1c-0.2,0-0.5,0.1-0.8,0.1  c-1.2,0-2.8,0-4.4,0s-3.2,0-4.4,0c-0.3,0-0.6,0-0.8-0.1c-0.2,0-0.5-0.1-0.6-0.1c-0.3-0.1-0.5-0.1-0.5-0.1s0.2,0,0.5-0.1  c0.2,0,0.4-0.1,0.6-0.1c0.2,0,0.5-0.1,0.8-0.1c1.2,0,2.8,0,4.4,0s3.2,0,4.4,0c0.3,0,0.6,0,0.8,0.1c0.2,0,0.5,0.1,0.6,0.1  C-392.8,283.1-392.6,283.1-392.6,283.1z"/>   

<path id="XMLID_11_" class="st0" transform="translate(0.25 0.25)"  fill="grey"  filter="url(#Filtershadow)" d="M-416.8,283.1c0,0-0.2,0-0.5,0.1c-0.2,0-0.4,0.1-0.6,0.1c-0.2,0-0.5,0.1-0.8,0.1  c-1.2,0-2.8,0-4.4,0s-3.2,0-4.4,0c-0.3,0-0.6,0-0.8-0.1c-0.2,0-0.5-0.1-0.6-0.1c-0.3-0.1-0.5-0.1-0.5-0.1s0.2,0,0.5-0.1  c0.1-0.1,0.4-0.1,0.6-0.1c0.2,0,0.5-0.1,0.8-0.1c1.2,0,2.8,0,4.4,0s3.2,0,4.4,0c0.3,0,0.6,0,0.8,0.1c0.2,0,0.5,0.1,0.6,0.1  C-417,283-416.8,283.1-416.8,283.1z"/>     

<path id="XMLID_12_" class="st0" d="M-416.8,283.1c0,0-0.2,0-0.5,0.1c-0.2,0-0.4,0.1-0.6,0.1c-0.2,0-0.5,0.1-0.8,0.1  c-1.2,0-2.8,0-4.4,0s-3.2,0-4.4,0c-0.3,0-0.6,0-0.8-0.1c-0.2,0-0.5-0.1-0.6-0.1c-0.3-0.1-0.5-0.1-0.5-0.1s0.2,0,0.5-0.1  c0.1-0.1,0.4-0.1,0.6-0.1c0.2,0,0.5-0.1,0.8-0.1c1.2,0,2.8,0,4.4,0s3.2,0,4.4,0c0.3,0,0.6,0,0.8,0.1c0.2,0,0.5,0.1,0.6,0.1  C-417,283-416.8,283.1-416.8,283.1z"/>


<circle    cx="-410.7" cy="283.1" r="1.4" transform="translate(0.25 0.25)"  fill="#916913" stroke-width="1" stroke="none"  />  
<circle class="st0" cx="-410.7" cy="283.1" r="1.4"/> 
</g>
 
</svg>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题