Answer the question
In order to leave comments, you need to log in
How to add png images over SVG?
Good day!
I'm trying to display a picture over SVG - png and it doesn't work. I'm trying to make a map on which there are cities, and near each city there is a small logo. approximately 24x24.
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("Карта ");
?> <link rel="stylesheet" href="/ammap/ammap.css" type="text/css">
<script src="/ammap/ammap.js" type="text/javascript"></script>
<!-- map file should be included after ammap.js -->
<script src="/ammap/maps/js/worldLow.js" type="text/javascript"></script>
<script type="text/javascript">
var map;
var image;
// svg path for target icon
var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z";
// svg path for plane icon
var planeSVG = "M19.671,8.11l-2.777,2.777l-3.837-0.861c0.362-0.505,0.916-1.683,0.464-2.135c-0.518-0.517-1.979,0.278-2.305,0.604l-0.913,0.913L7.614,8.804l-2.021,2.021l2.232,1.061l-0.082,0.082l1.701,1.701l0.688-0.687l3.164,1.504L9.571,18.21H6.413l-1.137,1.138l3.6,0.948l1.83,1.83l0.947,3.598l1.137-1.137V21.43l3.725-3.725l1.504,3.164l-0.687,0.687l1.702,1.701l0.081-0.081l1.062,2.231l2.02-2.02l-0.604-2.689l0.912-0.912c0.326-0.326,1.121-1.789,0.604-2.306c-0.452-0.452-1.63,0.101-2.135,0.464l-0.861-3.838l2.777-2.777c0.947-0.947,3.599-4.862,2.62-5.839C24.533,4.512,20.618,7.163,19.671,8.11z";
var img = document.createElement("img");
img.src = "/711/img/W6.png";
AmCharts.ready(function() {
map = new AmCharts.AmMap();
map.pathToImages = "/ammap/images/";
var dataProvider = {
mapVar: AmCharts.maps.worldLow
};
map.areasSettings = {
unlistedAreasColor: "#ebebeb"
};
map.textSeettings = {
color:"#5b9f2c"};
map.imagesSettings = {
color: "#5b9f2c",
rollOverColor: "#51c802",
selectedColor: "#3179a3"
};
map.linesSettings = {
color: "#306170",
alpha: 0.4
};
// KIEV
var london = {
id: "london",
color: "#3179a3",
svgPath: targetSVG,
title: "Київ",
latitude: 50.4422,
longitude: 30.5367,
scale: 1.7,
zoomLevel: 4.64,
zoomLongitude: 17,
zoomLatitude: 43,
label: "KYIV ",
labelColor: "#5b9f2c",
labelRollOverColor: "#5b9f2c",
{
svgPath: targetSVG,
title: "Кельн",
latitude: 50.942537,
longitude: 6.955306,
label:"Кельн",
img.src = "/711/img/W6.png",
labelColor: "#5b9f2c",
labelRollOverColor: "#5b9f2c",},
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question