问题
如何在SVG上覆盖透明图像模式（PNG），同时将重叠的图像模式保持在SVG的边界内，并保持SVG的填充可见？
有点像CSS中你可以定义背景颜色和背景图像。
EG。 background: red url(noise.png) top left repeat;
图片我正在寻找的例子
In this image，左边的气球是我目前拥有的SVG。我想要实现的是正确的气球如何应用噪音。
代码示例：
这是我到目前为止所尝试的代码示例：
完整演示： http://staging.kassandrapoon.com/tests/svg/（很抱歉非jsfiddle或代码笔示例。背景图案未加载跨域）
我的模式尝试的SVG：
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="143px" height="214px" viewBox="0 0 143 214" enable-background="new 0 0 143 214" xml:space="preserve">
<defs>
<!-- noise.png -->
<style type="text/css">
<![CDATA[
.filtered{
filter: url(#filter);
}
]]>
</style>
<filter id="filter" filterUnits="userSpaceOnUse">
<feImage xlink:href="noise.png" x="0" y="0" width="198" height="193" result="IMAGEFILL"/>
<feTile in="IMAGEFILL" result="TILEPATTERN"/>
<feComposite operator="in" in="TILEPATTERN" in2="SourceAlpha"/>
</filter>
</defs>
<g>
<g class="filtered">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#DE3F18" points="90.8,214 53.2,214 47.3,175.9 98.1,175.9 "/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#DE3F18" d="M143,72.6c0-39.5-32-71.7-71.5-71.7S0,33.2,0,72.7
C0,79.1,0.9,86,2.4,91.6c0,0,1.3,4.4,2,6.2C4.6,98.2,5,98.6,5.1,99c0.5,1.3,1.2,2.7,1.8,4c0.3,0.6,0.6,1.1,0.9,1.6
c0.6,1.1,1.2,2.3,1.8,3.4c0.3,0.6,0.7,1.1,1,1.7c0.7,1.1,1.3,2.1,2,3.1c0.4,0.5,0.8,1.1,1.1,1.6c0.7,1,1.5,2,2.3,3
c0.4,0.5,0.8,1,1.2,1.4c0.8,1,1.7,1.9,2.6,2.9c0.4,0.4,0.8,0.8,1.2,1.3c1,1,2,1.9,3,2.8c0.4,0.3,0.8,0.7,1.2,1
c0.3,0.2,0.5,0.5,0.8,0.7L46.4,158h2.8h44.5h2.8l20.3-30.6c0.3-0.2,0.5-0.5,0.8-0.7c0.4-0.3,0.8-0.7,1.2-1c1-0.9,2-1.8,3-2.8
c0.4-0.4,0.8-0.8,1.2-1.3c0.9-0.9,1.8-1.9,2.6-2.9c0.4-0.5,0.8-1,1.2-1.4c0.8-1,1.6-2,2.3-3c0.4-0.5,0.8-1,1.1-1.6
c0.7-1,1.4-2.1,2-3.1c0.3-0.6,0.7-1.1,1-1.7c0.6-1.1,1.2-2.2,1.8-3.4c0.3-0.6,0.6-1.1,0.9-1.7c0.6-1.3,1.2-2.6,1.7-4
c0.2-0.4,0.4-0.8,0.5-1.3c0.7-1.8,2.3-7,2.3-7S143,79,143,72.6z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#F9F9EF" d="M126.1,68.4c0-37.4-24.4-68.8-55.2-68.8h0.3h-0.3
C40-0.3,14.7,31.1,14.7,68.4c0,0,0,0,0,0.1c0,0,0,0.1,0,0.1c0,6,1.2,12.5,2.2,17.2c0.2,0.8,0.9,2.6,1.3,4.2c0.4,1,0.9,2,1.3,3.2
c0.3,1,0.8,1.9,1.1,2.9c0.4,0.8,0.7,1.5,1.1,2.4c0.5,1.1,0.9,2.1,1.3,3l0.9,1.8c0.5,1,1,2,1.6,2.9l0.9,1.5c0,0.1,0.1,0.1,0.1,0.2
c0.6,0.9,1.1,1.8,1.6,2.6c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0.3,0.5,0.6,0.9,1,1.4c0.7,0.9,29.4,46.8,29.4,46.8h25.7
c0,0,28.7-45.8,29.4-46.8c0.3-0.5,0.6-0.9,1-1.4c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0.5-0.8,1.1-1.6,1.6-2.6
c0-0.1,0.1-0.1,0.1-0.2l0.9-1.5c0.5-0.9,1-1.9,1.6-2.9l0.9-1.8c0.4-0.8,0.9-1.9,1.3-3c0.3-0.8,0.7-1.6,1-2.4
c0.4-0.9,0.8-1.9,1.1-2.9c0.4-1.2,0.8-2.2,1.2-3.2c0.4-1.6,0.2-3.3,0.4-4.2c1.1-4.6,1.1-11.2,1.1-17.2
C126.1,68.6,126.1,68.5,126.1,68.4C126.1,68.5,126.1,68.4,126.1,68.4z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#DE3F18" d="M91.9,57.1c0,43.5-21.6,101-21.6,101s-21.6-57.5-21.6-101
S58.9,0.7,70.4,0.7C79.1,0.7,91.9,13.6,91.9,57.1z"/>
<polyline fill="none" stroke="#FC611F" stroke-width="1.8927" stroke-miterlimit="10" points="47.9,175.9 27.8,130 70.6,130
115.2,130.1 96.5,175.9 "/>
<line fill="none" stroke="#FC611F" stroke-width="1.8927" stroke-miterlimit="10" x1="73.2" y1="175.9" x2="72.3" y2="130"/>
<g>
<polygon fill="#DE3F18" points="46.4,158 49.3,158 93.7,158 96.6,158 115.3,130 27.7,130 "/>
</g>
</g>
<g>
<g>
<path fill="#F9F9EF" d="M102.6,188.6c0,5.5-2.3,7.4-5.1,7.4c-2.8,0-5.1-1.9-5.1-7.4s5.1-12.6,5.1-12.6S102.6,183,102.6,188.6z"/>
<path fill="#F9F9EF" d="M77.6,188.6c0,5.5-2.3,7.4-5.1,7.4c-2.8,0-5.1-1.9-5.1-7.4s5.1-12.6,5.1-12.6S77.6,183,77.6,188.6z"/>
<path fill="#F9F9EF" d="M52.6,188.6c0,5.5-2.3,7.4-5.1,7.4c-2.8,0-5.1-1.9-5.1-7.4s5.1-12.6,5.1-12.6S52.6,183,52.6,188.6z"/>
</g>
</g>
</g>
</svg>
我尝试在SVG中定义一个类似here的模式，但是它取代了我想要保留的现有填充颜色。