openlayers-3のマーカーとしてsvgアイコンを使用

Question

Openlayers-3のマーカーとしてsvgアイコンを使用しようとしました。ここで私のコードです。

var svg = '<?xml version="1.0"?>' 
      + '<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">' 
      + '<circle cx="60" cy="60" r="60"/>' 
      + '</svg>'; 

var style = new ol.style.Style({ 
      image: new ol.style.Icon({ 
       opacity: 1, 
       src: 'data:image/svg+xml;base64,' + btoa(svg) 
      }) 
     }); 

ただし、次の図に示すように、私のsvgイメージは切り捨てられています。ここで、（ アイコンは円形であるべきである）

Answer 1

は、アイコンsymbolizerインラインSVGを示す例である：

var svg = '<svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg">' 
    + '<circle cx="60" cy="60" r="60"/>' 
    + '</svg>'; 

var style = new ol.style.Style({ 
    image: new ol.style.Icon({ 
    opacity: 1, 
    src: 'data:image/svg+xml;utf8,' + svg, 
    scale: 0.3 
    }) 
}); 

A：http://jsfiddle.net/eze84su3/

ここ関連するコードでありますあなたとの相違点：

• width属性とheight属性を<svg>に追加しました。これにより、ブラウザは結果として得られる画像の大きさを知ることができます。
• アイコンにscaleプロパティを追加して画像のサイズを変更しました。
• base64（重要ではない）の代わりにutf8を使用しました。