好的，所以我有两个形状，并且它们都在svg图案定义的黄色背景上填充了蓝色波尔卡圆点图案。工作正常。
但是，假设我想使用相同的图案并且第二个形状以不同的颜色显示它，而没有定义第二个图案？在我的实际项目中，我有几十个项目，我想分享相同的模式，但有许多不同的潜在颜色。有没有办法改变模式def之外的颜色，也许用CSS？
<style>
.pattern-dots .base{
fill: url(#pattern-dots);}
</style>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="313.405px" height="145.757px" viewBox="0 0 313.405 145.757" enable-background="new 0 0 313.405 145.757"
xml:space="preserve">
<g id="Layer_1" class="pattern-dots">
<path class="base" d="M47.865,56.567l37.838-16.216L128.271,64c0,0-29.73,8.783-20.946,29.729
C107.324,93.729,44.486,91.027,47.865,56.567z"/>
</g>
<g id="Layer_2" class="pattern-dots">
<path class="base" d="M213.133,29.609c5.319,1.958,7.124,9.153,11,13.511c6.386,7.18,12.748,3.645,21.301,6.196
c16.13,4.812,26.723,18.663,19.742,35.545c-4.383,10.6-19.383,18.412-30.038,19.78c-4.478,0.574-15.175,1.553-18.654-1.476
c-4.315-3.756-1.739-11.636-5.343-15.463c-4.807-5.105-19.233-2.016-26.201-2.016c-11.164,0-18.879,2.396-20.469-10.672
c-0.763-6.275,0.461-12.744,4.951-17.417c4.568-4.754,12.449-3.735,16.486-7.954c4.264-4.456,1.923-11.502,7.646-16.036
C198.242,29.894,207.393,27.497,213.133,29.609z"/>
</g>
</svg>
<svg id='pattern' xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="pattern-dots" width="50" height="50" patternUnits="userSpaceOnUse">
<rect x="-0.506" fill="#ffe2b4" width="51.107" height="50" class="background"/>
<path fill="#999BC5" d="M15.946,12.651c0,1.905-1.544,3.45-3.45,3.45c-0.953,0-1.815-0.386-2.439-1.011
c-0.624-0.624-1.01-1.486-1.01-2.439c0-1.905,1.544-3.45,3.45-3.45S15.946,10.746,15.946,12.651z"/>
<path fill="#999BC5" d="M38.945,35.65c0,1.906-1.544,3.45-3.449,3.45c-1.322,0-2.471-0.743-3.049-1.835
c-0.256-0.481-0.4-1.031-0.4-1.615c0-1.904,1.544-3.449,3.449-3.449S38.945,33.746,38.945,35.65z"/></pattern>
</defs>
</svg>
这里是jsfiddle，显示两个匹配填充的形状。