Merge pull request #8933 from fredj/icon-symbol-svg

Port icon-symbol-svg rendering test

rendering/cases/icon-symbol-svg/main.js

@@ -0,0 +1,72 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import {Vector as VectorLayer, Tile as TileLayer} from '../../../src/ol/layer.js';
+import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js';
+import Point from '../../../src/ol/geom/Point.js';
+import Feature from '../../../src/ol/Feature.js';
+import {fromLonLat} from '../../../src/ol/proj.js';
+import {Style, Icon} from '../../../src/ol/style.js';
+
+const center = fromLonLat([8, 50]);
+
+const vectorSource = new VectorSource();
+let feature;
+
+// scales svg correctly
+feature = new Feature({
+  geometry: new Point(fromLonLat([3, 45]))
+});
+feature.setStyle(new Style({
+  image: new Icon({
+    src: '/data/me0.svg',
+    scale: 2
+  })
+}));
+vectorSource.addFeature(feature);
+
+// uses offset correctly
+feature = new Feature({
+  geometry: new Point(fromLonLat([3, 55]))
+});
+feature.setStyle(new Style({
+  image: new Icon({
+    src: '/data/me0.svg',
+    offset: [16, 0],
+    scale: 2
+  })
+}));
+vectorSource.addFeature(feature);
+
+// uses offset correctly if it is larger than size
+feature = new Feature({
+  geometry: new Point(fromLonLat([8, 55]))
+});
+feature.setStyle(new Style({
+  image: new Icon({
+    src: '/data/me0.svg',
+    offsetOrigin: 'bottom-left',
+    offset: [16, 0],
+    size: [64, 40]
+  })
+}));
+vectorSource.addFeature(feature);
+
+new Map({
+  layers: [
+    new TileLayer({
+      source: new XYZ({
+        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg'
+      })
+    }),
+    new VectorLayer({
+      source: vectorSource
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 3
+  })
+});
+
+render();

rendering/data/me0.svg

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="32"
+   height="20"
+   viewBox="0 0 32 19.999999"
+   enable-background="new 0 0 512 512"
+   xml:space="preserve"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
+   sodipodi:docname="me0.svg"><metadata
+     id="metadata3776"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs3774" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1916"
+     inkscape:window-height="1033"
+     id="namedview3772"
+     showgrid="false"
+     inkscape:zoom="29.5"
+     inkscape:cx="7.3511697"
+     inkscape:cy="12.058448"
+     inkscape:window-x="0"
+     inkscape:window-y="45"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="Layer_1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" /><g
+     id="g3754"
+     style="fill:#085095;fill-opacity:1;stroke:#ffffff;stroke-width:25;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     transform="matrix(0.04324609,0,0,0.04111507,12.942501,-0.5123079)"><path
+       style="fill:#085095;fill-opacity:1;stroke:#ffffff;stroke-width:25;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path3770"
+       d="m 256,25.6 c -95.4279,0 -172.8,77.3721 -172.8,172.8 0,95.4279 144,288 172.8,288 28.8,0 172.8,-192.5721 172.8,-288 C 428.8,102.9721 351.4279,25.6 256,25.6 Z m 0,288 c -63.5346,0 -115.2,-51.6942 -115.2,-115.2 0,-63.5058 51.6654,-115.2 115.2,-115.2 63.5346,0 115.2,51.6942 115.2,115.2 0,63.5058 -51.6654,115.2 -115.2,115.2 z"
+       inkscape:connector-curvature="0" /><polygon
+       style="fill:#085095;fill-opacity:1;stroke:#ffffff;stroke-width:69.44444275;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       transform="matrix(0.36,0,0,0.36,160.72934,103.79972)"
+       id="polygon3"
+       points="330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 259.216,29.942 "
+       stroke-miterlimit="10" /></g></svg>