Bing Maps V8 ajaxコントロールのインラインSVGのテキストカラーの変更

Question

ここの例ではhttps://blogs.bing.com/maps/May-2016-(1)/Pushpin-Clustering-in-Bing-Maps-V8です。クラスタ化されたピンの数が異なることを示す白い色を変更したい。以下のコードを試してみましたが、うまくいきませんでした。それを変更する別の方法がありますか？

cluster.setOptions({ 
      icon: svgString, 
      anchor: new Microsoft.Maps.Point(radius, radius), 
      textOffset: new Microsoft.Maps.Point(0, radius - 8), 
      color: Microsoft.Maps.Color.fromHex('#111111') 
     }); 

Answer 1

カラー押しピンオプションは、デフォルトの押しピンの色を変更します。テキスト値の色を変更するオプションはありませんが、インラインSVGを使用しているため、インラインSVGで行うのは簡単です。 SVGに "{color}"プレースホルダを含めることができます。これは、押しピンカラーオプションで指定した色に置き換えられます。ここに例があります：

var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"><circle cx="15" cy="15" r="13" style="stroke:orange;stroke-width:2;fill:yellow;"/><text x="10" y="20" style="fill:{color};">{text}</text></svg>'; 

var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), { 
    icon: svg.replace('{text}', 'hi'), 
    anchor: new Microsoft.Maps.Point(15, 15), 
    color: 'red' 
    });