jVectorMap styling change fill type - javascript

How would I style the "world_mill_en" map like this?
I know how to do the markers, just have to specify the longitude and latitude. How would I get rid of all the dividing lines between the continents, and change the fill such that it's just a bunch of grey dots? As far as I know, the api only lets you change it to a solid fill.
Also, how do I disable region hovering?

Use a pattern fill (with the image you want) for the region (doesn't require masking)
or
Use a pattern fill on a rectangle that uses a mask with the region in it
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 1000 360">
<defs>
<pattern patternUnits="userSpaceOnUse" id="pat1" x="10" y="10"
width="425" height="319">
<image width="425" height="319"
xlink:href="http://designm.ag/images/0709/wood/71.jpg" />
</pattern>
<text id="txt1" y="100" font-weight="bold" font-family="Verdana"
font-size="100">Some Text</text>
</defs>
<use width="1000" height="400" xlink:href="#txt1" fill="url(#pat1)"/>
</svg>
Here's a fiddle showing how to do a simple pattern.

Related

How to know if the user's face/boundry box is within an ellipse in a canvas

I'm working on application the make checks for a user in front of camera, I used the FaceApi to detect the face and draw a bounding box arround it. I want to make sure that face/bounding box is within an ellipse(an svg). Basically, I think I will compute the intersection between the bounding box and the ellipse. And let the check passes only if the intersection is above a predefined threshold(say 0.5, the half part of the face is within the ellipse).
<svg
width="100%"
height="100%"
className="svg"
viewBox="0 0 260 200"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="overlay-mask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="#fff"/>
<ellipse id="ellipse-mask" cx="50%" cy="45%" rx="60" ry="85" />
</mask>
</defs>
<rect x="0" y="0" width="100%" height="100%" mask="url(#overlay-mask)" fillOpacity="0.7"/>
</svg>
is there any way to compute/know the area of the ellipse to use it to compute the intersection with the bounding box arround the face detected with Javascript ?
Any help of advice will be appreciated. Thank you.

How can I apply a pattern to an SVG element that ignores the element's transform values?

I have a JavaScript application that modifies an inline SVG. I have multiple elements within the SVG that all need to have the same background image applied to them. Elements (paths) are positioned in the SVG via transform attributes. Presently I am using a pattern fill on the elements. Is there any way to achieve the effect of the pattern staying stationary irrespective to element transforms?
Currently I have this:
I want this:
(note: I hard-baked the path in the second photo, which can't be used in the application)
Edit:
The patterns are currently applied like so:
<defs>
<pattern id="metallicgold" x="0" y="0" width="1240" height="775" patternUnits="userSpaceOnUse">
<image xlink:href="img/gold-texture.png" />
</pattern>
</defs>
The transforms on elements look like this:
<path transform="translate(-445.0000396775016 -1950.3326958481455) rotate(317.2309439443859 2926.326416015625 2926.32666015625) scale(1 1)" style="fill: url('#metallicgold'); stroke: none;" d="M1951.326416015625,1951.32666015625L3901.326416015625,1951.32666015625L3901.326416015625,3901.32666015625L1951.326416015625,3901.32666015625L1951.326416015625,1951.32666015625Z" x="0" y="0"></path>
If you want a constant background as you transform shapes, you should consider using a filter with userSpaceOnUse filterUnits, unless the transforms are easy and apply to all elements filled, in which case, you can use patternTransform on the pattern to reverse the transform on the elements.
<svg width="800px" height="600px" viewBox="0 0 4000 4000">
<defs>
<filter id="brick" x="0" y="0" width="4000" height="4000" filterUnits="userSpaceOnUse">
<feImage xlink:href="https://s-media-cache-ak0.pinimg.com/originals/c9/97/81/c99781a0ab356681cb038f70b1df68f1.jpg" x="0" y="0" width="4000" height="4000" preserveAspectRatio="xMinYMin meet"/>
<feComposite operator="in" in2="SourceGraphic"/>
</filter>
</defs>
<g filter="url(#brick)">
<path transform="translate(-445.00 -1950.33) rotate(317.23 2926.32 2926.32) scale(1 1)" stroke="none" fill="red" d="M1951.326416015625,1951.32666015625L3901.326416015625,1951.32666015625L3901.326416015625,3901.32666015625L1951.326416015625,3901.32666015625L1951.326416015625,1951.32666015625Z" x="0" y="0"></path>
</g>
<rect x="1250" y="500" width="300" height="300" fill="blue"/>
<g filter="url(#brick)">
<circle cx="1000" cy="1000" r="500"/>
</g>
</svg>

zoom in automatically in map svg

I have a map in SVG format.
I wanted to integrate features zoom and zoom out.
I used the library svg-pan-zoom, it served me very well but I did not find a feature that allows me to zoom in on a specific area automatically.
The map contains all the departments of Europe and I want that when I select certain criteria an automatic zoom this done on specific areas.
Does svg-pan-zoom allow me to do that if no do you know of another library that meets the needs?
I'm not familiar with svgpanzoom. But in general you can use the viewBox attribute to zoom to a specific area of your SVG.
Consider the following example. It's a simple SVG with 3 rectangles.
<svg width="200" height="200" viewBox="0 0 200 200">
<rect x="0" y="0" width="200" height="200" fill="red" />
<rect x="100" y="50" width="50" height="50" fill="green" />
<rect x="110" y="60" width="30" height="30" fill="blue" />
</svg>
Now if you want to zoom into the green rectangle, just add the viewBox attribute to the x/y/width/height of the area you want to zoom to. The green rectangle is 100/50/50/50. See it live here: https://codepen.io/anon/pen/eyaggG
<svg width="200" height="200" viewBox="100 50 50 50">
<rect x="0" y="0" width="200" height="200" fill="red" />
<rect x="100" y="50" width="50" height="50" fill="green" />
<rect x="110" y="60" width="30" height="30" fill="blue" />
</svg>
I hope this will help you

Multiple javascript animation of masks of a svg

I am trying to animate the radius of the circle #mask-hole-2 with javascript. So that it animates the radius from 0 to 175px. But i dont know how to do this in a common way. I cant use css cause there seems to be another specification used on firefox for animating masks with css.
<svg width="400" height="300">
<defs>
<mask id="hole">
<circle id="mask-hole-1" cx="165" cy="156.5" r="165" fill="white" />
<rect id="mask-hole-3" width="100%" height="100%" fill="white"/>
<circle id="mask-hole-2" cx="165" cy="156.5" r="145" />
</mask>
</defs>
<image width="400" height="300"
xlink:href="http://lorempixel.com/400/300/sports/"
mask="url(#hole)"/>
</svg>
I want #mask-hole-1 to change its radius within 2 seconds from 0 to 175. After 2s #mask-hole-2 should change its radius from 0 to 175 also.
Would be nice if the animation works smooth. Any help is appreciated.

How can i change the pattern image parameter inside SVG by JavaScript?

i have to change logo inside embedded SVG, logo image link defined in Pattern and applied to Rect/Path container. Is there a way to change link to image (xlink:href="link_to_logo.svg") by JS?
<pattern id="logo"
patternUnits="objectBoundingBox"
x="0" y="0" width="1" height="1">
<image x="0" y="0"
xlink:href="link_to_logo.svg"
width="331" height="331">
</image>
</pattern>
<path id="logo-container" d="M1152 99h331v331h-331z" fill="url(#logo)"/>
$('#logo img').attr('xlink:href', 'newValue')
should do it.
image.setAttributeNS("http://www.w3.org/1999/xlink","href",newValue)
in plain js use setAttributeNS.

Categories