我有svg边框,我想更改此文件的纹理,如金箔纹理。我怎么能这样做呢?
所以我想添加那个纹理: enter image description here
<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;
答案 0 :(得分:1)
<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;
线条的背景和颜色几乎合并。
考虑阴影选项。
创建阴影效果:
transform="translate(0.20 0.2)"
<filter id="Filtershadow" height="120%" width="120%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
</filter>
以下是完整代码:
<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;