1

Есть SVG-карта страны с разбивкой по областям. Каждая область это polygon. Нужно сделать, чтобы при клике на область появлялся балун с подсказкой, причём, в балуне может быть html (< strong> и < br> в основном). Сам файл вывожу на страницу с помощью < object>.

Перегуглил весь интернет, нашёл только плагин tooltipster, который вроде как работает с SVG, но по факту - в инструкциях об этом ничего не говорится.

Может, подскажете способ реализовать задумку?

Спасибо!

3

2 ответа 2

2

Вот пример с наведением и кликом:

document.querySelectorAll('path').forEach(e => e.onclick = () => alert(e.getAttribute('id')))
svg {
  height:100vh;
}

path {
  transition: 300ms;
  cursor: pointer;
}

path:hover {
  fill: red;
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 700 700" height="100vh">

<path fill="#CEE3F5" stroke="#6E6E6E" stroke-width="0.4" id="FI.3280" d="M13.9,486.7 L13.8,488.7 L10.9,488.9 L12.9,486.2 Z M14.5,477.2 L15.2,475.9 L16.3,478.0 L14.7,477.6 L15.1,480.8 L12.5,479.8 L13.3,476.6 Z M12.8,457.4 L14.0,458.6 L17.8,458.3 L16.1,461.0 L18.8,463.2 L19.1,461.3 L21.2,460.0 L23.1,461.2 L23.1,464.5 L21.1,463.8 L18.7,465.5 L19.5,466.5 L17.0,467.2 L13.5,461.6 Z M42.4,457.6 L43.1,459.0 L42.1,460.6 L40.4,459.8 Z M48.7,458.6 L48.0,460.9 L46.0,460.1 L45.2,462.7 L43.7,461.8 L43.5,457.9 L44.8,457.3 Z M21.6,456.3 L20.2,458.1 L17.7,455.0 L21.5,453.0 Z M43.9,453.3 L42.4,454.5 L39.8,456.3 L41.6,453.2 Z M67.9,428.0 L68.0,430.7 L66.0,431.8 L64.4,428.8 L66.2,427.4 Z M15.9,545.8 L12.0,550.3 L11.5,548.1 L9.7,547.0 L11.4,542.6 L12.2,537.8 L12.9,538.7 L13.6,535.0 L15.9,532.1 L14.9,530.4 L15.8,528.1 L13.6,530.3 L15.2,521.9 L13.4,522.5 L13.4,517.9 L10.4,521.7 L11.2,517.3 L9.0,518.0 L10.0,513.9 L8.8,514.1 L9.0,511.7 L10.4,509.6 L9.7,507.7 L12.1,504.7 L9.5,503.0 L8.0,504.7 L9.0,499.1 L11.4,497.6 L11.8,495.8 L10.6,494.3 L10.7,492.2 L12.9,492.3 L14.1,490.1 L14.9,486.3 L13.5,483.7 L14.5,482.9 L15.3,486.5 L18.1,487.7 L20.2,485.7 L21.3,482.0 L22.7,481.5 L22.5,475.5 L24.4,473.3 L29.1,477.4 L30.1,476.9 L27.0,472.7 L25.5,469.6 L25.2,463.9 L27.3,462.5 L29.8,465.1 L33.5,462.4 L37.8,461.4 L37.3,463.1 L37.7,467.3 L39.9,469.7 L39.3,466.8 L42.3,462.8 L43.1,464.2 L47.2,463.6 L50.0,459.6 L50.6,461.4 L52.9,458.4 L49.5,452.0 L48.0,450.5 L48.0,448.6 L49.7,448.0 L51.3,450.4 L54.2,451.8 L50.8,446.8 L51.4,443.9 L52.8,444.5 L52.5,446.5 L55.5,448.2 L56.2,443.5 L55.9,440.7 L57.1,442.1 L58.2,440.5 L59.4,441.4 L58.1,438.0 L59.2,435.7 L61.0,435.9 L61.3,432.7 L62.7,434.2 L63.3,432.8 L64.7,434.3 L65.6,438.5 L68.4,437.1 L69.3,434.3 L68.7,432.0 L71.7,430.6 L71.2,427.1 L73.9,427.7 L75.3,427.9 L79.9,432.5 L81.4,432.8 L83.8,430.7 L87.6,431.6 L88.5,429.9 L91.9,432.0 L95.5,435.8 L96.0,437.2 L90.1,439.2 L88.9,436.8 L86.9,440.9 L90.6,442.1 L90.8,444.6 L92.7,446.4 L93.9,456.9 L90.9,453.5 L89.6,450.8 L86.7,449.2 L83.6,448.9 L80.8,451.2 L78.6,455.2 L76.0,457.2 L72.0,456.4 L70.9,458.4 L68.2,457.2 L64.2,456.8 L64.6,457.6 L61.5,459.4 L62.0,460.7 L58.9,462.3 L59.4,464.3 L58.6,468.3 L61.2,468.1 L61.3,471.7 L59.7,475.4 L56.8,476.5 L52.8,483.5 L51.6,489.0 L47.6,494.3 L44.0,496.3 L38.2,494.4 L34.7,492.0 L32.4,488.8 L30.3,492.0 L29.9,495.3 L31.2,499.3 L28.2,503.3 L24.6,505.8 L25.2,508.7 L22.6,515.7 L21.5,520.8 L22.2,522.5 L25.8,522.5 L25.6,528.7 L27.9,532.4 L25.5,533.1 L25.4,537.1 L24.0,537.4 L22.7,544.5 L23.1,545.7 L19.3,545.1 Z">
</path>
<path fill="#CEE3F5" stroke="#6E6E6E" stroke-width="0.4" id="FI.3272" d="M39.6,681.5 L39.0,686.2 L37.0,686.4 L36.1,683.6 L36.4,680.6 L39.0,680.4 Z M57.3,680.6 L56.4,681.4 L53.2,681.3 L55.8,678.5 Z M12.2,674.5 L11.2,676.9 L7.8,676.9 L6.8,675.7 L9.4,675.4 L7.4,674.3 L10.1,672.1 L12.9,673.3 Z M20.2,674.0 L16.0,676.4 L14.1,675.8 L14.8,672.4 L16.1,671.2 L19.9,671.1 Z M35.7,675.7 L34.6,674.4 L35.5,672.6 L37.7,671.9 Z M4.2,670.2 L3.8,672.1 L0.0,669.9 L2.9,668.7 Z M24.5,676.1 L22.6,672.7 L26.4,670.6 L27.3,671.6 L25.1,673.3 L26.0,674.4 Z M34.1,672.2 L32.1,671.5 L33.5,668.9 L35.1,668.9 Z M24.1,663.5 L23.4,665.8 L21.5,664.8 L21.4,663.4 Z M36.9,666.2 L36.6,667.3 L32.0,668.0 L28.0,666.7 L28.3,664.5 L30.0,663.7 L34.0,664.2 Z M40.2,663.1 L41.7,664.1 L37.9,665.8 L38.7,663.9 L36.2,663.7 L39.2,661.6 Z M29.5,661.1 L35.5,660.0 L35.5,661.1 L32.1,662.0 Z M18.6,658.7 L20.8,656.5 L19.4,654.0 L20.7,652.2 L22.6,653.9 L24.2,657.7 L22.4,657.5 L24.9,659.6 L25.5,662.1 L22.9,661.9 Z M3.6,650.1 L1.1,648.7 L1.5,644.5 L3.1,647.5 Z M8.5,646.5 L7.5,651.2 L5.9,649.7 L4.3,644.9 L6.4,644.9 Z M3.2,644.2 L0.6,640.6 L2.3,638.6 L3.2,640.9 Z M6.0,622.2 L4.4,622.1 L5.8,619.9 L3.6,617.8 L5.8,616.5 L7.9,619.5 Z M59.3,680.0 L57.5,680.7 L56.7,678.4 L54.5,676.8 L54.4,674.4 L56.5,671.3 L59.6,668.3 L61.7,662.9 L59.4,666.3 L57.5,665.5 L55.2,666.4 L50.2,670.4 L42.8,672.2 L45.3,670.5 L44.8,667.8 L40.4,669.3 L41.0,667.4 L44.1,663.4 L47.1,660.7 L41.5,660.4 L42.3,658.6 L35.7,659.5 L32.2,655.9 L30.1,655.3 L29.7,653.5 L28.3,655.2 L24.2,651.1 L24.9,649.3 L22.4,648.3 L21.4,650.0 L22.1,651.9 L19.1,651.6 L20.4,645.0 L21.7,644.3 L21.8,641.5 L17.9,644.4 L15.4,645.2 L14.3,650.0 L10.0,649.7 L12.1,647.7 L10.6,644.8 L7.0,643.6 L7.3,641.7 L9.2,641.9 L6.4,638.9 L5.8,635.9 L8.1,636.8 L8.3,633.7 L9.9,633.9 L7.3,631.8 L5.7,626.4 L5.6,623.9 L8.6,624.1 L8.0,620.6 L9.5,621.6 L7.0,614.4 L6.1,610.4 L9.7,611.6 L12.3,614.9 L15.0,614.8 L17.2,612.7 L17.5,614.9 L21.0,615.4 L21.9,613.5 L27.3,618.2 L27.0,619.7 L28.7,623.4 L33.5,624.7 L36.9,622.2 L47.5,621.7 L46.7,619.8 L48.0,618.8 L53.0,619.3 L55.7,618.6 L57.4,612.2 L61.5,615.6 L62.3,616.6 L66.5,616.8 L68.9,619.2 L72.0,623.0 L70.8,626.6 L67.1,626.6 L66.4,629.6 L68.8,631.5 L66.9,634.2 L70.2,637.9 L73.2,638.2 L77.3,637.0 L80.3,640.5 L83.0,641.3 L84.6,643.3 L91.0,644.5 L90.4,646.4 L91.5,648.0 L89.5,650.7 L89.0,654.5 L85.4,655.3 L83.7,657.6 L86.4,657.9 L86.5,661.8 L85.0,663.3 L84.1,666.8 L79.4,670.7 L80.7,672.1 L80.9,674.9 L77.5,674.6 L75.5,676.3 L72.3,677.1 L69.0,675.4 L65.3,679.2 L60.9,681.3 Z M45.0,688.1 L46.0,688.8 L45.6,690.9 L45.0,688.1 L45.0,688.1 Z M44.8,687.4 L45.0,688.1 L45.0,688.1 L45.0,688.1 L44.6,687.8 L44.8,687.4 Z M44.8,687.4 L44.4,685.8 L44.4,683.2 L42.1,685.7 L40.0,686.3 L40.6,680.5 L38.9,678.1 L41.7,676.9 L45.1,676.7 L38.8,675.7 L40.3,670.9 L40.2,673.1 L44.2,673.1 L46.1,672.0 L52.8,671.3 L55.6,667.5 L57.9,667.1 L57.6,668.6 L53.3,673.7 L53.4,679.3 L49.1,683.5 L50.0,684.5 L47.2,686.8 L46.5,684.3 L44.8,687.4 Z"></path>
<path fill="#CEE3F5" stroke="#6E6E6E" stroke-width="0.4" id="FI.3275" d="M148.9,676.0 L146.6,671.8 L147.2,670.6 L150.7,674.2 Z M59.3,680.0 L60.9,681.3 L65.3,679.2 L69.0,675.4 L72.3,677.1 L75.5,676.3 L77.5,674.6 L80.9,674.9 L80.7,672.1 L79.4,670.7 L84.1,666.8 L85.0,663.3 L86.5,661.8 L86.4,657.9 L83.7,657.6 L85.4,655.3 L89.0,654.5 L89.5,650.7 L91.5,648.0 L90.4,646.4 L91.0,644.5 L92.8,644.3 L100.9,646.9 L103.8,650.7 L104.8,648.8 L107.7,648.8 L108.2,651.1 L111.9,651.5 L113.4,650.2 L113.6,647.5 L115.2,644.7 L119.8,645.2 L129.2,643.9 L131.8,644.8 L131.4,642.6 L134.5,640.9 L132.5,640.2 L130.4,641.3 L131.6,638.6 L133.7,637.6 L132.2,634.3 L135.0,633.6 L137.8,637.6 L139.5,638.8 L143.3,636.4 L145.5,638.9 L145.9,642.5 L148.8,643.7 L158.2,640.8 L160.2,642.5 L166.1,643.6 L169.1,642.2 L169.2,639.4 L171.0,639.5 L172.9,642.1 L173.6,645.3 L175.9,646.7 L178.7,650.2 L180.5,650.8 L177.5,656.5 L177.1,658.8 L178.1,660.9 L176.9,662.8 L174.6,662.8 L172.6,665.0 L170.0,660.3 L170.9,663.7 L167.7,663.1 L166.4,664.1 L162.1,659.4 L159.9,657.9 L162.6,661.5 L161.8,663.7 L165.2,668.2 L164.6,670.2 L162.8,670.6 L161.4,666.8 L158.7,666.3 L157.6,669.2 L159.0,674.3 L156.7,671.6 L153.1,669.0 L152.8,670.7 L156.3,672.9 L152.4,674.0 L149.8,670.9 L151.5,667.6 L150.3,666.0 L145.4,668.4 L145.8,671.8 L144.5,674.0 L138.3,673.4 L134.1,673.8 L133.3,678.0 L128.8,678.9 L129.2,681.0 L127.1,679.2 L128.1,676.7 L127.2,675.8 L125.4,680.5 L122.5,680.6 L121.9,676.9 L121.3,679.0 L115.9,681.4 L111.7,679.4 L113.3,681.2 L111.3,683.8 L113.6,683.0 L113.1,685.8 L108.6,690.0 L106.8,690.3 L108.5,686.6 L105.4,689.3 L105.3,684.6 L102.9,684.6 L100.8,686.7 L98.7,686.1 L98.2,688.0 L96.5,687.0 L93.5,688.5 L92.6,686.5 L90.5,689.0 L88.1,689.4 L85.5,691.7 L84.5,690.9 L78.9,691.4 L77.4,689.9 L72.7,691.1 L74.8,687.4 L76.9,685.8 L77.2,683.3 L73.8,686.2 L73.2,688.5 L69.1,693.2 L65.9,694.7 L65.3,696.8 L66.2,698.7 L57.7,699.2 L54.1,700.0 L55.2,697.9 L62.1,695.3 L63.5,693.2 L66.3,693.1 L68.1,690.7 L69.1,686.4 L65.6,692.5 L64.4,691.1 L62.5,691.4 L62.0,694.5 L61.2,693.5 L61.9,689.3 L65.1,687.9 L67.2,685.1 L65.4,684.3 L60.4,684.7 L58.3,683.0 Z"></path>
<path fill="#CEE3F5" stroke="#6E6E6E" stroke-width="0.4" id="FI.3281" d="M133.9,342.8 L139.3,344.5 L136.4,345.0 L132.3,344.3 L129.4,346.9 L130.2,348.8 L132.0,348.7 L129.0,350.4 L128.3,347.3 L126.7,349.2 L124.9,344.4 L127.6,341.6 L132.9,340.8 Z M144.3,303.1 L150.0,297.2 L153.4,296.1 L160.6,296.8 L163.8,295.9 L171.0,292.3 L172.0,292.6 L171.8,297.3 L172.6,298.8 L191.1,299.9 L198.4,296.8 L200.3,294.5 L206.7,283.7 L207.6,283.0 L211.1,284.8 L213.4,282.8 L214.7,284.8 L217.1,291.3 L229.2,292.7 L236.9,290.3 L238.1,287.8 L237.5,285.9 L234.0,281.3 L234.3,279.2 L236.4,280.0 L238.8,279.2 L242.4,279.6 L244.2,278.7 L244.5,276.1 L241.1,274.0 L240.3,271.0 L243.1,269.6 L244.5,266.0 L243.7,264.8 L244.0,263.7 L244.4,262.6 L243.6,261.3 L241.2,261.2 L239.0,259.5 L238.1,255.5 L239.8,251.0 L241.4,250.6 L241.9,246.6 L243.1,245.8 L255.2,249.9 L258.9,249.0 L265.5,248.6 L266.3,252.3 L268.8,258.4 L276.2,270.4 L278.3,279.5 L282.1,289.7 L283.5,297.3 L283.3,301.1 L280.5,299.8 L273.8,302.1 L272.2,303.5 L276.2,307.7 L273.4,312.5 L266.5,313.2 L260.5,311.2 L259.5,311.4 L258.2,314.7 L255.9,316.1 L251.2,316.8 L243.6,320.5 L241.3,325.5 L241.9,327.4 L240.2,328.2 L226.5,331.5 L223.7,333.6 L221.7,340.8 L220.4,342.0 L217.6,340.8 L206.1,342.4 L203.7,345.0 L203.7,347.2 L206.6,350.8 L207.3,353.0 L206.9,358.9 L206.1,360.8 L204.2,361.1 L198.9,360.2 L195.3,362.5 L192.4,366.7 L192.7,368.4 L189.9,371.7 L185.1,372.5 L185.1,374.1 L183.3,375.5 L181.8,378.5 L178.8,379.5 L175.4,382.4 L174.7,383.9 L178.2,387.3 L179.7,389.8 L179.9,392.8 L181.6,394.5 L186.3,395.8 L186.3,398.2 L188.8,400.2 L188.9,408.8 L189.6,412.9 L191.7,414.7 L186.3,416.6 L174.3,426.9 L172.4,430.1 L173.8,442.7 L173.7,445.1 L171.0,447.5 L170.0,452.4 L169.1,454.1 L165.7,455.5 L162.1,455.2 L158.3,450.7 L156.8,449.7 L149.3,448.6 L145.3,445.0 L141.5,443.6 L139.0,445.3 L136.6,452.4 L135.0,453.2 L134.2,451.4 L127.4,442.9 L123.3,439.0 L121.4,436.0 L118.2,428.5 L117.0,426.8 L113.0,424.3 L111.7,420.3 L109.4,417.9 L108.2,411.7 L106.5,409.6 L102.0,407.1 L96.9,402.9 L98.0,399.6 L100.9,399.0 L101.9,396.3 L104.3,397.8 L104.0,394.1 L106.3,388.8 L114.7,381.6 L117.1,378.9 L118.5,372.2 L119.8,369.1 L123.1,366.3 L123.6,363.1 L124.9,362.0 L123.5,360.3 L127.0,361.6 L127.5,358.8 L129.3,358.4 L130.5,356.4 L134.2,356.0 L139.4,353.2 L142.4,355.5 L144.6,360.2 L147.4,359.4 L148.0,354.7 L144.3,352.5 L142.9,349.9 L143.8,348.3 L146.8,348.8 L149.0,351.0 L150.3,350.1 L149.6,345.3 L147.9,341.1 L143.8,339.1 L146.0,334.5 L147.0,330.2 L146.1,329.7 L147.8,324.1 L145.9,321.7 L148.5,319.4 L148.5,314.5 L147.0,311.6 L144.3,309.0 L142.2,309.0 L141.4,306.9 Z"></path>
<path fill="#CEE3F5" stroke="#6E6E6E" stroke-width="0.4" id="FI.3279" d="M61.5,615.6 L57.4,612.2 L55.7,618.6 L53.0,619.3 L48.0,618.8 L46.7,619.8 L47.5,621.7 L36.9,622.2 L33.5,624.7 L28.7,623.4 L27.0,619.7 L27.3,618.2 L21.9,613.5 L21.0,615.4 L17.5,614.9 L17.2,612.7 L15.0,614.8 L12.3,614.9 L9.7,611.6 L11.2,611.2 L11.8,608.1 L11.1,605.2 L13.5,602.0 L15.6,601.3 L13.1,598.2 L14.2,596.0 L15.5,596.1 L15.4,589.5 L13.1,587.4 L17.2,586.8 L15.4,583.8 L12.7,581.7 L17.0,582.8 L18.3,582.2 L17.6,579.8 L15.8,579.6 L14.4,576.5 L16.0,576.1 L22.6,579.7 L19.6,575.4 L19.1,572.4 L17.4,570.8 L17.1,566.9 L19.3,567.6 L16.4,564.7 L15.9,563.1 L16.7,559.6 L14.2,554.0 L14.9,552.8 L13.8,550.5 L12.0,550.3 L15.9,545.8 L19.3,545.1 L23.1,545.7 L32.1,548.8 L36.4,547.4 L40.5,542.7 L45.9,540.3 L53.0,533.1 L54.7,528.7 L62.5,531.3 L62.6,538.1 L59.6,540.4 L59.5,545.1 L53.6,547.5 L52.0,549.9 L54.8,551.7 L55.9,554.8 L57.3,555.5 L59.0,558.9 L57.6,559.7 L60.1,562.0 L59.9,563.7 L56.2,567.0 L54.0,571.1 L54.2,573.2 L55.5,571.9 L56.0,573.8 L54.7,574.9 L53.8,578.1 L51.6,580.0 L52.7,583.7 L55.3,585.9 L55.1,588.6 L53.5,588.9 L51.7,591.4 L49.7,591.2 L49.9,596.1 L52.8,601.5 L58.9,602.7 L60.7,604.2 L60.7,609.3 L61.8,610.9 L60.3,613.2 L62.4,613.1 Z"></path>
<path fill="#CEE3F5" stroke="#6E6E6E" stroke-width="0.4" id="FI.3276" d="M180.5,650.8 L178.7,650.2 L175.9,646.7 L173.6,645.3 L172.9,642.1 L171.0,639.5 L169.2,639.4 L168.6,636.4 L167.2,634.6 L165.2,634.2 L165.3,632.1 L167.5,628.1 L163.6,625.7 L163.7,623.7 L165.9,623.6 L166.8,620.9 L164.1,615.2 L166.7,612.2 L168.9,613.5 L172.3,612.1 L175.5,609.0 L176.8,605.3 L179.5,604.0 L182.7,603.1 L184.5,605.8 L183.6,607.6 L185.6,608.1 L188.8,604.1 L191.3,603.4 L193.7,611.1 L195.6,612.4 L202.6,611.7 L201.8,615.6 L203.1,616.2 L201.1,617.8 L200.3,621.9 L202.3,622.8 L203.5,625.4 L199.9,625.3 L202.6,629.0 L208.0,631.5 L212.7,636.6 L218.6,636.5 L220.0,638.8 L224.2,639.4 L225.4,642.6 L229.3,645.6 L222.8,653.3 L221.2,651.5 L220.3,654.0 L221.0,656.6 L219.4,658.0 L217.1,657.6 L218.9,655.7 L216.9,655.5 L215.6,658.6 L212.7,656.1 L211.5,656.7 L211.0,659.6 L208.0,657.2 L203.9,656.6 L203.3,655.3 L205.9,655.3 L201.5,652.5 L202.3,655.5 L197.4,653.9 L195.5,657.9 L188.5,660.0 L189.3,658.1 L187.3,658.7 L186.7,661.4 L184.9,662.7 L183.2,660.5 L182.2,660.9 L183.7,662.1 L181.0,663.6 L180.2,665.4 L179.0,663.2 L181.5,661.2 L180.4,661.7 L177.8,657.9 L179.9,656.0 L181.4,650.8 L184.3,649.8 L187.2,652.0 L185.4,647.5 L182.6,647.3 Z"></path>
<path fill="#CEE3F5" stroke="#6E6E6E" stroke-width="0.4" id="FI.3287" d="M186.4,523.2 L182.5,521.9 L179.1,518.2 L182.3,514.2 L182.8,511.3 L180.4,503.6 L177.2,500.6 L175.9,502.4 L169.6,497.0 L170.1,495.0 L165.9,490.8 L166.3,489.7 L170.0,488.6 L173.0,489.3 L174.3,486.8 L172.8,486.0 L171.7,483.2 L174.1,482.8 L169.5,475.0 L169.3,471.5 L170.3,469.8 L168.8,463.7 L167.4,460.1 L169.8,455.9 L169.1,454.1 L170.0,452.4 L171.0,447.5 L173.7,445.1 L173.8,442.7 L172.4,430.1 L174.3,426.9 L186.3,416.6 L191.7,414.7 L207.2,418.8 L208.7,420.6 L212.1,420.1 L214.9,422.0 L218.0,423.1 L226.1,430.6 L228.4,432.1 L230.6,435.7 L234.7,438.2 L236.8,433.5 L240.3,437.2 L244.5,438.8 L243.9,439.9 L244.9,444.1 L246.8,447.2 L244.9,448.5 L246.6,455.0 L249.8,459.0 L249.6,461.8 L246.6,467.7 L245.6,470.6 L248.9,473.6 L254.0,480.6 L259.5,484.6 L259.7,485.8 L256.0,489.6 L260.8,495.7 L256.0,499.7 L251.9,496.6 L247.3,502.5 L249.2,506.0 L247.9,508.7 L246.0,513.0 L242.8,513.4 L244.1,515.3 L240.3,514.9 L239.0,519.5 L238.9,522.3 L236.6,521.5 L237.0,523.4 L235.4,524.4 L237.3,529.2 L234.1,529.6 L230.3,532.2 L229.7,534.3 L226.7,534.6 L226.5,536.1 L224.3,534.4 L222.3,534.9 L219.2,530.8 L219.9,529.1 L216.8,527.0 L211.6,521.8 L207.6,518.7 L205.2,521.2 L201.4,522.3 L199.4,520.7 L197.7,521.7 L194.2,521.3 L194.5,523.1 L191.7,521.7 L188.2,524.5 Z"></path>
<path fill="#CEE3F5" stroke="#6E6E6E" stroke-width="0.4" id="FI.3286" d="M169.1,454.1 L169.8,455.9 L167.4,460.1 L168.8,463.7 L170.3,469.8 L169.3,471.5 L169.5,475.0 L174.1,482.8 L171.7,483.2 L172.8,486.0 L174.3,486.8 L173.0,489.3 L170.0,488.6 L166.3,489.7 L165.9,490.8 L170.1,495.0 L169.6,497.0 L175.9,502.4 L177.2,500.6 L180.4,503.6 L182.8,511.3 L182.3,514.2 L179.1,518.2 L182.5,521.9 L186.4,523.2 L185.8,527.2 L188.1,529.4 L185.5,530.8 L183.6,533.9 L183.4,538.6 L181.4,536.7 L179.5,536.9 L178.0,539.6 L176.3,538.8 L174.2,540.6 L171.3,544.7 L171.3,547.2 L175.9,554.8 L174.4,558.3 L174.0,562.1 L175.4,562.7 L175.6,567.5 L178.4,570.7 L180.2,575.7 L179.1,579.5 L175.8,577.7 L173.3,581.0 L172.8,578.1 L167.6,579.7 L164.8,576.9 L165.6,574.2 L163.0,572.7 L160.6,568.8 L159.0,570.4 L158.6,567.8 L155.8,574.3 L152.9,574.0 L149.3,576.0 L147.2,575.8 L145.1,586.1 L143.2,589.0 L128.8,590.8 L128.5,590.5 L127.9,586.3 L126.7,584.0 L127.1,581.9 L124.5,582.7 L123.3,579.4 L124.7,576.8 L128.2,578.3 L129.2,576.0 L127.9,573.1 L130.3,570.6 L128.6,566.8 L129.1,558.8 L127.5,550.4 L126.9,549.3 L122.8,550.6 L120.5,548.9 L120.6,545.4 L117.5,540.3 L115.4,539.5 L111.3,541.6 L110.0,540.4 L107.4,534.9 L103.5,533.5 L101.4,531.8 L100.6,527.1 L104.4,521.9 L106.6,520.1 L109.9,521.1 L110.7,518.7 L112.2,518.2 L114.1,519.8 L116.7,518.1 L117.2,514.2 L118.4,512.9 L117.0,510.3 L118.9,507.4 L116.9,503.8 L113.0,493.4 L115.4,493.1 L114.8,490.1 L113.1,489.5 L110.4,479.6 L112.4,478.6 L113.6,475.7 L118.9,473.2 L125.3,475.0 L126.3,468.5 L126.3,466.3 L127.5,465.5 L127.2,460.2 L128.1,458.3 L130.8,455.8 L135.0,453.2 L136.6,452.4 L139.0,445.3 L141.5,443.6 L145.3,445.0 L149.3,448.6 L156.8,449.7 L158.3,450.7 L162.1,455.2 L165.7,455.5 Z"></path>
<path fill="#CEE3F5" stroke="#6E6E6E" stroke-width="0.4" id="FI.3290" d="M113.6,475.7 L112.4,478.6 L110.4,479.6 L113.1,489.5 L114.8,490.1 L115.4,493.1 L113.0,493.4 L116.9,503.8 L118.9,507.4 L117.0,510.3 L118.4,512.9 L117.2,514.2 L116.7,518.1 L114.1,519.8 L112.2,518.2 L110.7,518.7 L109.9,521.1 L106.6,520.1 L104.4,521.9 L100.6,527.1 L97.6,524.0 L97.4,519.7 L94.5,519.5 L89.2,522.9 L84.4,523.1 L84.5,525.5 L81.5,525.0 L79.7,522.3 L77.4,522.9 L75.9,525.9 L73.2,528.7 L69.7,530.5 L62.5,531.3 L54.7,528.7 L53.0,533.1 L45.9,540.3 L40.5,542.7 L36.4,547.4 L32.1,548.8 L23.1,545.7 L22.7,544.5 L24.0,537.4 L25.4,537.1 L25.5,533.1 L27.9,532.4 L25.6,528.7 L25.8,522.5 L22.2,522.5 L21.5,520.8 L22.6,515.7 L25.2,508.7 L24.6,505.8 L28.2,503.3 L31.2,499.3 L29.9,495.3 L30.3,492.0 L32.4,488.8 L34.7,492.0 L38.2,494.4 L44.0,496.3 L47.6,494.3 L51.6,489.0 L52.8,483.5 L56.8,476.5 L59.7,475.4 L61.3,471.7 L61.2,468.1 L58.6,468.3 L59.4,464.3 L58.9,462.3 L62.0,460.7 L61.5,459.4 L64.6,457.6 L64.2,456.8 L68.2,457.2 L70.9,458.4 L72.0,456.4 L76.0,457.2 L78.6,455.2 L80.8,451.2 L83.6,448.9 L86.7,449.2 L89.6,450.8 L90.9,453.5 L93.9,456.9 L96.7,462.4 L98.9,463.9 L104.1,465.4 L106.2,467.2 L109.5,471.8 L109.3,473.3 Z"></path>
<path fill="#CEE3F5" stroke="#6E6E6E" stroke-width="0.4" id="FI.3291" d="M128.5,590.5 L128.8,590.8 L143.2,589.0 L145.1,586.1 L147.2,575.8 L149.3,576.0 L152.9,574.0 L155.8,574.3 L158.6,567.8 L159.0,570.4 L160.6,568.8 L163.0,572.7 L165.6,574.2 L164.8,576.9 L167.6,579.7 L172.8,578.1 L173.3,581.0 L172.0,583.1 L172.0,589.9 L171.1,592.6 L173.1,595.5 L172.3,597.3 L175.9,600.5 L178.4,601.4 L179.5,604.0 L176.8,605.3 L175.5,609.0 L172.3,612.1 L168.9,613.5 L166.7,612.2 L164.1,615.2 L166.8,620.9 L165.9,623.6 L163.7,623.7 L163.6,625.7 L167.5,628.1 L165.3,632.1 L165.2,634.2 L167.2,634.6 L168.6,636.4 L169.2,639.4 L169.1,642.2 L166.1,643.6 L160.2,642.5 L158.2,640.8 L148.8,643.7 L145.9,642.5 L145.5,638.9 L143.3,636.4 L139.5,638.8 L137.8,637.6 L135.0,633.6 L132.2,634.3 L131.4,633.0 L133.5,628.2 L137.3,623.7 L136.8,621.1 L138.6,616.9 L138.7,615.0 L137.1,613.8 L137.7,608.9 L135.6,605.5 L130.5,604.4 L130.0,603.0 L126.9,601.7 L126.9,599.6 L126.6,593.7 L125.6,589.2 Z"></path>
<path fill="#CEE3F5" stroke="#6E6E6E" stroke-width="0.4" id="FI.3292" d="M126.9,599.6 L126.9,601.7 L130.0,603.0 L130.5,604.4 L135.6,605.5 L137.7,608.9 L137.1,613.8 L138.7,615.0 L138.6,616.9 L136.8,621.1 L137.3,623.7 L133.5,628.2 L131.4,633.0 L132.2,634.3 L133.7,637.6 L131.6,638.6 L130.4,641.3 L132.5,640.2 L134.5,640.9 L131.4,642.6 L131.8,644.8 L129.2,643.9 L119.8,645.2 L115.2,644.7 L113.6,647.5 L113.4,650.2 L111.9,651.5 L108.2,651.1 L107.7,648.8 L104.8,648.8 L103.8,650.7 L100.9,646.9 L92.8,644.3 L91.0,644.5 L84.6,643.3 L83.0,641.3 L80.3,640.5 L77.3,637.0 L73.2,638.2 L70.2,637.9 L66.9,634.2 L68.8,631.5 L66.4,629.6 L67.1,626.6 L70.8,626.6 L72.0,623.0 L68.9,619.2 L71.6,618.0 L77.8,622.1 L78.1,620.6 L81.8,620.8 L85.9,619.6 L88.2,620.7 L90.0,623.7 L91.0,623.1 L89.8,620.3 L90.9,617.9 L88.9,618.3 L88.1,616.2 L89.1,615.1 L93.7,614.0 L97.1,612.3 L100.7,612.1 L100.6,611.2 L103.7,610.0 L106.0,607.6 L105.6,604.7 L108.9,604.4 L113.6,601.3 L115.8,601.1 L119.2,602.6 L120.9,600.2 L123.0,603.3 L125.6,602.2 Z"></path>
<path fill="#CEE3F5" stroke="#6E6E6E" stroke-width="0.4" id="FI.3293" d="M128.5,590.5 L125.6,589.2 L126.6,593.7 L126.9,599.6 L125.6,602.2 L123.0,603.3 L120.9,600.2 L119.2,602.6 L115.8,601.1 L113.6,601.3 L108.9,604.4 L105.6,604.7 L106.0,607.6 L103.7,610.0 L100.6,611.2 L100.7,612.1 L97.1,612.3 L93.7,614.0 L89.1,615.1 L88.1,616.2 L88.9,618.3 L90.9,617.9 L89.8,620.3 L91.0,623.1 L90.0,623.7 L88.2,620.7 L85.9,619.6 L81.8,620.8 L78.1,620.6 L77.8,622.1 L71.6,618.0 L68.9,619.2 L66.5,616.8 L62.3,616.6 L61.5,615.6 L62.4,613.1 L60.3,613.2 L61.8,610.9 L60.7,609.3 L60.7,604.2 L58.9,602.7 L52.8,601.5 L49.9,596.1 L49.7,591.2 L51.7,591.4 L53.5,588.9 L55.1,588.6 L55.3,585.9 L52.7,583.7 L51.6,580.0 L53.8,578.1 L54.7,574.9 L56.0,573.8 L55.5,571.9 L54.2,573.2 L54.0,571.1 L56.2,567.0 L59.9,563.7 L60.1,562.0 L57.6,559.7 L59.0,558.9 L57.3,555.5 L55.9,554.8 L54.8,551.7 L52.0,549.9 L53.6,547.5 L59.5,545.1 L59.6,540.4 L62.6,538.1 L62.5,531.3 L69.7,530.5 L73.2,528.7 L75.9,525.9 L77.4,522.9 L79.7,522.3 L81.5,525.0 L84.5,525.5 L84.4,523.1 L89.2,522.9 L94.5,519.5 L97.4,519.7 L97.6,524.0 L100.6,527.1 L101.4,531.8 L103.5,533.5 L107.4,534.9 L110.0,540.4 L111.3,541.6 L115.4,539.5 L117.5,540.3 L120.6,545.4 L120.5,548.9 L122.8,550.6 L126.9,549.3 L127.5,550.4 L129.1,558.8 L128.6,566.8 L130.3,570.6 L127.9,573.1 L129.2,576.0 L128.2,578.3 L124.7,576.8 L123.3,579.4 L124.5,582.7 L127.1,581.9 L126.7,584.0 L127.9,586.3 Z"></path>
<path fill="#CEE3F5" stroke="#6E6E6E" stroke-width="0.4" id="FI.3294" d="M297.5,562.0 L292.4,570.6 L288.2,575.5 L286.4,580.2 L281.9,586.0 L278.8,587.9 L276.5,592.9 L271.9,598.3 L268.3,604.7 L266.0,607.0 L261.2,610.3 L255.2,615.4 L251.7,620.2 L249.4,624.8 L246.5,625.6 L240.2,632.0 L237.2,636.7 L234.1,639.1 L229.3,645.6 L225.4,642.6 L224.2,639.4 L220.0,638.8 L218.6,636.5 L212.7,636.6 L208.0,631.5 L202.6,629.0 L199.9,625.3 L203.5,625.4 L202.3,622.8 L200.3,621.9 L201.1,617.8 L203.1,616.2 L201.8,615.6 L202.6,611.7 L206.5,611.3 L208.3,608.2 L206.6,607.8 L206.5,605.5 L203.0,601.1 L203.5,600.2 L200.3,600.3 L194.7,599.2 L196.1,597.1 L199.3,597.2 L202.2,595.4 L205.5,595.3 L213.3,598.0 L234.4,596.9 L239.6,593.7 L241.4,591.7 L243.7,587.3 L245.0,587.4 L246.8,589.8 L249.8,589.9 L254.9,587.8 L255.0,585.6 L262.8,585.1 L267.2,584.0 L269.8,582.3 L272.0,578.8 L278.1,574.2 L279.0,571.5 L294.6,562.3 Z"></path>
<path fill="#CEE3F5" stroke="#6E6E6E" stroke-width="0.4" id="FI.3295" d="M179.5,604.0 L178.4,601.4 L175.9,600.5 L172.3,597.3 L173.1,595.5 L171.1,592.6 L172.0,589.9 L172.0,583.1 L173.3,581.0 L175.8,577.7 L179.1,579.5 L180.2,575.7 L178.4,570.7 L175.6,567.5 L175.4,562.7 L174.0,562.1 L174.4,558.3 L175.9,554.8 L171.3,547.2 L171.3,544.7 L174.2,540.6 L176.3,538.8 L178.0,539.6 L179.5,536.9 L181.4,536.7 L183.4,538.6 L183.6,533.9 L185.5,530.8 L188.1,529.4 L185.8,527.2 L186.4,523.2 L188.2,524.5 L191.7,521.7 L194.5,523.1 L194.2,521.3 L197.7,521.7 L199.4,520.7 L201.4,522.3 L205.2,521.2 L207.6,518.7 L211.6,521.8 L216.8,527.0 L219.9,529.1 L219.2,530.8 L222.3,534.9 L224.3,534.4 L226.5,536.1 L226.7,534.6 L229.7,534.3 L230.3,532.2 L234.1,529.6 L237.3,529.2 L235.4,524.4 L237.0,523.4 L236.6,521.5 L238.9,522.3 L239.0,519.5 L240.3,514.9 L244.1,515.3 L242.8,513.4 L246.0,513.0 L247.9,508.7 L252.7,510.1 L256.7,513.5 L260.2,517.2 L259.7,518.3 L262.4,519.4 L261.8,524.2 L264.3,526.6 L265.8,524.4 L268.2,526.7 L270.8,533.4 L272.7,536.0 L273.2,541.7 L274.6,545.9 L277.6,550.8 L281.3,554.3 L280.1,557.8 L282.5,561.0 L282.9,564.4 L281.7,567.3 L279.0,571.5 L278.1,574.2 L272.0,578.8 L269.8,582.3 L267.2,584.0 L262.8,585.1 L255.0,585.6 L254.9,587.8 L249.8,589.9 L246.8,589.8 L245.0,587.4 L243.7,587.3 L241.4,591.7 L239.6,593.7 L234.4,596.9 L213.3,598.0 L205.5,595.3 L202.2,595.4 L199.3,597.2 L196.1,597.1 L194.7,599.2 L200.3,600.3 L203.5,600.2 L203.0,601.1 L206.5,605.5 L206.6,607.8 L208.3,608.2 L206.5,611.3 L202.6,611.7 L195.6,612.4 L193.7,611.1 L191.3,603.4 L188.8,604.1 L185.6,608.1 L183.6,607.6 L184.5,605.8 L182.7,603.1 Z"></path>
<path fill="#CEE3F5" stroke="#6E6E6E" stroke-width="0.4" id="FI.3296" d="M279.0,571.5 L281.7,567.3 L282.9,564.4 L282.5,561.0 L280.1,557.8 L281.3,554.3 L277.6,550.8 L274.6,545.9 L273.2,541.7 L272.7,536.0 L270.8,533.4 L268.2,526.7 L265.8,524.4 L264.3,526.6 L261.8,524.2 L262.4,519.4 L259.7,518.3 L260.2,517.2 L256.7,513.5 L252.7,510.1 L247.9,508.7 L249.2,506.0 L247.3,502.5 L251.9,496.6 L256.0,499.7 L260.8,495.7 L256.0,489.6 L259.7,485.8 L259.5,484.6 L254.0,480.6 L248.9,473.6 L245.6,470.6 L246.6,467.7 L249.6,461.8 L249.8,459.0 L246.6,455.0 L244.9,448.5 L246.8,447.2 L244.9,444.1 L243.9,439.9 L244.5,438.8 L240.3,437.2 L236.8,433.5 L239.2,428.5 L239.9,425.3 L243.1,424.4 L254.1,426.9 L275.9,424.0 L276.9,425.0 L278.7,433.6 L280.2,434.7 L284.6,432.2 L286.6,432.2 L286.8,434.4 L294.6,443.2 L299.0,446.3 L302.6,451.0 L313.1,456.3 L318.3,461.9 L324.8,465.9 L326.4,467.8 L327.5,473.3 L328.9,475.3 L331.9,477.7 L336.2,482.9 L338.5,487.0 L335.0,495.3 L333.2,504.8 L331.5,508.8 L330.1,515.3 L327.4,517.9 L326.6,520.2 L322.4,525.7 L320.3,530.4 L316.9,533.3 L312.0,538.3 L311.3,540.6 L307.5,546.6 L303.3,552.0 L297.5,562.0 L294.6,562.3 Z"></path>
<path fill="#CEE3F5" stroke="#6E6E6E" stroke-width="0.4" id="FI.3288" d="M236.8,433.5 L234.7,438.2 L230.6,435.7 L228.4,432.1 L226.1,430.6 L218.0,423.1 L214.9,422.0 L212.1,420.1 L208.7,420.6 L207.2,418.8 L191.7,414.7 L189.6,412.9 L188.9,408.8 L188.8,400.2 L186.3,398.2 L186.3,395.8 L181.6,394.5 L179.9,392.8 L179.7,389.8 L178.2,387.3 L174.7,383.9 L175.4,382.4 L178.8,379.5 L181.8,378.5 L183.3,375.5 L185.1,374.1 L185.1,372.5 L189.9,371.7 L192.7,368.4 L192.4,366.7 L195.3,362.5 L198.9,360.2 L204.2,361.1 L206.1,360.8 L206.9,358.9 L207.3,353.0 L206.6,350.8 L203.7,347.2 L203.7,345.0 L206.1,342.4 L217.6,340.8 L220.4,342.0 L221.7,340.8 L223.7,333.6 L226.5,331.5 L240.2,328.2 L241.9,327.4 L241.3,325.5 L243.6,320.5 L251.2,316.8 L255.9,316.1 L258.2,314.7 L259.5,311.4 L260.5,311.2 L266.5,313.2 L273.4,312.5 L273.1,315.5 L273.7,321.6 L273.5,324.1 L270.7,328.3 L269.8,330.7 L271.2,332.0 L275.2,331.7 L277.2,332.4 L276.7,336.6 L277.9,338.1 L277.1,340.1 L272.8,341.4 L270.9,344.4 L270.7,347.4 L272.3,353.1 L274.4,357.7 L276.9,360.6 L279.8,361.2 L285.2,361.0 L286.9,362.0 L286.7,365.3 L288.7,367.9 L289.1,370.5 L287.9,372.4 L283.0,375.2 L284.0,380.3 L286.4,382.4 L285.6,387.6 L287.5,389.9 L294.4,392.6 L298.4,397.0 L301.8,398.9 L301.3,402.9 L303.2,408.1 L303.2,410.4 L301.2,414.7 L296.1,421.5 L294.5,426.1 L292.7,428.8 L286.6,432.2 L284.6,432.2 L280.2,434.7 L278.7,433.6 L276.9,425.0 L275.9,424.0 L254.1,426.9 L243.1,424.4 L239.9,425.3 L239.2,428.5 Z"></path>
<path fill="#CEE3F5" stroke="#6E6E6E" stroke-width="0.4" id="FI.3285" d="M144.3,303.1 L141.4,306.9 L140.9,305.3 L137.2,304.8 L135.9,302.6 L133.8,301.8 L130.0,304.3 L129.3,299.4 L127.5,299.6 L127.0,301.9 L125.3,301.1 L127.4,299.1 L126.4,294.6 L129.4,286.7 L128.7,286.0 L126.4,291.4 L123.8,292.2 L122.3,294.0 L117.8,290.1 L117.3,294.6 L115.8,288.8 L113.1,281.3 L112.4,274.3 L111.0,272.0 L109.2,266.5 L106.3,265.3 L104.7,263.1 L103.5,256.3 L104.0,252.3 L103.3,247.3 L106.0,242.8 L110.3,238.9 L111.4,229.1 L111.2,226.0 L114.4,222.0 L112.8,216.6 L110.0,210.5 L108.1,208.7 L106.7,205.3 L106.4,201.9 L104.3,198.0 L105.5,193.9 L105.3,190.7 L108.9,188.9 L110.4,185.7 L109.6,185.0 L110.2,180.0 L105.8,177.4 L102.7,177.9 L101.6,175.0 L103.0,170.3 L105.2,168.2 L104.0,157.8 L104.2,150.7 L105.0,147.9 L107.7,146.6 L109.3,144.6 L109.0,142.5 L107.2,141.7 L102.6,136.1 L101.6,130.8 L100.2,129.5 L97.1,130.3 L97.5,124.4 L95.2,118.7 L91.7,115.8 L89.5,111.6 L88.0,112.2 L86.0,109.2 L84.6,109.2 L77.2,105.2 L71.4,104.6 L68.0,98.1 L63.6,96.3 L63.3,94.2 L60.0,90.5 L57.4,89.0 L56.3,84.6 L54.1,84.0 L52.1,79.5 L48.8,75.6 L44.9,73.4 L44.7,71.2 L46.1,68.6 L43.0,65.2 L40.1,64.4 L38.9,63.0 L42.4,58.7 L49.0,63.7 L50.7,63.7 L52.3,60.8 L50.0,54.2 L51.9,50.3 L57.5,47.3 L65.2,49.3 L65.8,50.0 L73.1,67.9 L76.2,72.0 L76.9,75.3 L78.5,79.0 L80.7,81.5 L80.8,87.8 L81.5,89.4 L85.8,88.7 L91.9,92.5 L96.1,92.0 L98.0,93.3 L100.3,97.0 L107.7,92.8 L111.7,92.3 L114.1,91.1 L115.7,85.4 L119.3,84.4 L124.2,87.4 L125.5,89.6 L129.0,92.3 L137.1,95.5 L139.3,97.5 L141.8,102.7 L142.9,103.2 L144.2,100.0 L148.4,97.9 L149.1,95.8 L149.5,89.2 L150.9,85.9 L155.6,81.8 L157.9,80.9 L160.9,82.1 L162.1,81.3 L166.0,72.5 L164.8,69.3 L165.4,63.6 L164.6,60.2 L166.1,51.9 L168.3,48.0 L167.5,44.7 L168.7,42.2 L168.8,37.7 L170.6,35.8 L171.7,31.5 L170.7,28.7 L172.4,25.7 L176.4,24.4 L179.3,19.0 L181.8,16.2 L182.2,13.6 L183.7,10.6 L188.6,9.5 L192.3,9.3 L197.9,11.8 L202.9,9.8 L203.1,7.8 L206.0,4.8 L208.8,3.3 L209.9,0.7 L214.1,0.8 L216.6,0.0 L218.6,4.2 L223.1,12.0 L228.2,14.5 L228.9,18.2 L230.7,19.3 L246.4,26.5 L248.3,32.5 L252.1,40.7 L249.5,46.8 L241.0,58.1 L240.3,65.7 L240.7,67.5 L243.6,71.1 L240.7,74.1 L237.8,75.3 L231.6,80.1 L231.3,82.5 L236.3,82.0 L238.4,82.4 L240.2,84.3 L238.3,91.8 L232.2,104.7 L232.3,108.2 L238.0,127.8 L239.7,129.9 L254.5,135.7 L256.1,137.3 L264.3,153.0 L266.0,155.1 L274.0,162.0 L273.3,163.7 L273.2,169.0 L272.2,174.3 L262.4,189.2 L251.9,210.7 L250.8,216.4 L252.0,221.2 L258.7,231.8 L261.4,239.4 L264.7,244.6 L265.5,248.6 L258.9,249.0 L255.2,249.9 L243.1,245.8 L241.9,246.6 L241.4,250.6 L239.8,251.0 L238.1,255.5 L239.0,259.5 L241.2,261.2 L243.6,261.3 L244.0,263.7 L244.5,266.0 L243.1,269.6 L240.3,271.0 L241.1,274.0 L244.5,276.1 L244.2,278.7 L242.4,279.6 L238.8,279.2 L236.4,280.0 L234.3,279.2 L234.0,281.3 L237.5,285.9 L238.1,287.8 L236.9,290.3 L229.2,292.7 L217.1,291.3 L214.7,284.8 L213.4,282.8 L211.1,284.8 L207.6,283.0 L206.7,283.7 L200.3,294.5 L198.4,296.8 L191.1,299.9 L172.6,298.8 L171.8,297.3 L172.0,292.6 L171.0,292.3 L163.8,295.9 L160.6,296.8 L153.4,296.1 L150.0,297.2 Z"></path>
<path fill="#CEE3F5" stroke="#6E6E6E" stroke-width="0.4" id="FI.3289" d="M135.0,453.2 L130.8,455.8 L128.1,458.3 L127.2,460.2 L127.5,465.5 L126.3,466.3 L126.3,468.5 L125.3,475.0 L118.9,473.2 L113.6,475.7 L109.3,473.3 L109.5,471.8 L106.2,467.2 L104.1,465.4 L98.9,463.9 L96.7,462.4 L93.9,456.9 L92.7,446.4 L90.8,444.6 L90.6,442.1 L86.9,440.9 L88.9,436.8 L90.1,439.2 L96.0,437.2 L95.5,435.8 L91.9,432.0 L88.5,429.9 L87.6,431.6 L83.8,430.7 L81.4,432.8 L79.9,432.5 L75.3,427.9 L73.9,427.7 L74.0,425.8 L76.7,423.1 L78.1,423.7 L80.6,421.1 L82.9,421.3 L84.6,419.9 L85.9,420.7 L87.3,419.1 L86.0,417.5 L86.8,410.6 L93.4,412.3 L93.9,411.7 L92.5,407.6 L94.0,407.2 L96.9,402.9 L102.0,407.1 L106.5,409.6 L108.2,411.7 L109.4,417.9 L111.7,420.3 L113.0,424.3 L117.0,426.8 L118.2,428.5 L121.4,436.0 L123.3,439.0 L127.4,442.9 L134.2,451.4 Z"></path>
</svg>

4
  • да, всё работает, но это когда файл svg вставляется на страницу кодом, а мне нужно object'ом, или хотя бы img'ом, потому что их на странице будет куча
    – Alexandros
    13 мая 2019 в 11:05
  • @Alexandros тогда придется мудрить, можно например воспользоваться пикингом - определение цвета и по нему определять что под мышкой, я попозже сделаю пример, это уже не тривиально, но возможно 13 мая 2019 в 11:26
  • определение цвета не пойдёт, поскольку, сама по себе карта разноцветная и с градиентами
    – Alexandros
    13 мая 2019 в 11:28
  • @Stranger in the Q (+) вот ещё одна проблема по картостроительству ru.stackoverflow.com/q/1015588/28748 20 авг 2019 в 17:14
1

Вот пример того, о чем я писал в комментах к другому ответу, здесь есть свои недостатки, но svg вставлена через img и по какому кругу произошел клик - различается

По клику мы определяем цвет второй картинки, в которой области отмечены цветами-идентификаторами. получить такую картинку легко из исходной...

let img = document.querySelector('#visible');
let pick = document.querySelector('#picking');
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width = pick.width;
canvas.height = pick.height;
ctx.drawImage(pick, 0, 0, pick.width, pick.height);
  
img.onclick = function(e) {
  var r = e.target.getBoundingClientRect();
  var px = ctx.getImageData(e.clientX - r.left, e.clientY - r.top, 1, 1).data;
  document.querySelector('span').textContent = 'id' + hex(px[0]) + hex(px[1]) + hex(px[2])
}

function hex (v) {
    return v.toString(16).padStart(2, '0');
}
<img id="picking" src="data:image/svg+xml,%3Csvg width='500' height='120' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle id='idf00000' fill='%23f00000' cx='50' cy='65' r='50'%3E%3C/circle%3E%3Ccircle id='id0f0000' fill='%230f0000' cx='150' cy='65' r='50'%3E%3C/circle%3E%3Ccircle id='id00f000' fill='%2300f000' cx='250' cy='65' r='50'%3E%3C/circle%3E%3Ccircle id='id000f00' fill='%23000f00' cx='350' cy='65' r='50'%3E%3C/circle%3E%3Ccircle id='id0000f0' fill='%230000f0' cx='450' cy='65' r='50'%3E%3C/circle%3E%3C/svg%3E" style="display:none"/>

<img style="margin:20px" id="visible" src="data:image/svg+xml,%3Csvg width='500' height='120' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient'%3E%3Cstop offset='0%25' stop-color='gold'/%3E%3Cstop offset='100%25' stop-color='teal'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle id='idf00000' fill='url(%23linear-gradient)' cx='50' cy='65' r='50'%3E%3C/circle%3E%3Ccircle id='id0f0000' fill='url(%23linear-gradient)' cx='150' cy='65' r='50'%3E%3C/circle%3E%3Ccircle id='id00f000' fill='url(%23linear-gradient)' cx='250' cy='65' r='50'%3E%3C/circle%3E%3Ccircle id='id000f00' fill='url(%23linear-gradient)' cx='350' cy='65' r='50'%3E%3C/circle%3E%3Ccircle id='id0000f0' fill='url(%23linear-gradient)' cx='450' cy='65' r='50'%3E%3C/circle%3E%3C/svg%3E"/>
<br>
<span></span>

Такой метод определения того что находится под мышкой - называется Picking, я его использую в WebGL/OpenGL когда сцена сложная, а поределить что под мышкой все же хочется за разумное время, подходит и для динамических сцен https://ru.stackoverflow.com/a/962780/188366

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.