I have an array of coordinates. And that coordinates occur dynamicly. So for some possibilities, it does not draw convex. Please check the example.
<div style="width : 700 , height : 700">
<svg width ="700px" height = '700px'>
<polygon points="203.21954686687195,209.09106845446956 103.21846501684684,30.73408772834725 98.7205079235916,110.89560444878055 213.4424487588524,32.1353347676166 " fill="lime" stroke="black" fillRule= 'nonzero' />
</svg>
</div>
Here is link :https://jsfiddle.net/zcj4qwpz/7/
So my question is simple : How can i make it convex for every time ? Should i generate new array for this? If so, how can i do that.
Or is there any solution by changing something on html-canvas props?
Note: I checked many questions but they didn't help me. For example this (the closest question to mine):
How to determine if a list of polygon points are in clockwise order?
Related
I created a radial with two tiers of options. I did in a way that isn't really dynamic and isn't really responsive to screen size. I now need it to be both of those things. Here is what it looks like when on the screen size I designed it for.
I created a working demo on sandbox that has the dimensions set how I need to use it on. This is what it looks like.
Here is link WORKING DEMO
any help is appreciated. Also keep in mind the outer tiers can have less or more options. it would be great if the blue toggle button would always align at the bottom of the radial like under the En of Energy Loss
I would consider using an SVG ViewBox in order to maintain consistency. What this basically does is create a consistent scalable SVG, mapping the size and coordinates of its container into a consistent range inside the SVG.
For example:
<div height="400px" width="400px">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" stroke="red" fill-opacity="0"/>
<circle r="4" cx="10" cy="10"/>
</svg>
</div>
So it basicalley creates a mapping from the 400x400 dimensions of the div, into the 100x100 of the svg, so the circle positioned at (10, 10) inside the svg will actually be in coordinates (40, 40) of the div
I am attempting to make a world map made from an svg comprising many circles. I based this from a codepen I found here: https://codepen.io/mvaneijgen/pen/NRzENO
E.g.
<svg viewBox="0 0 845.2 458">
<circle class="st0" cx="826.1" cy="110.3" r="1.9"/>
<circle class="st0" cx="819.3" cy="110.3" r="1.9"/>
<circle class="st0" cx="819.3" cy="117.1" r="1.9"/>
<circle class="st0" cx="812.6" cy="90" r="1.9"/>
The map is great. I have been dividing it up into coloured continent regions using classes. These change colour when hovered over. All good so far. Most of my functionality is there.
The issue is that you have to be hovering directly on a circle to make the colour change happen. I am using a javascript mouseover event to change the colour.
Is there any way of increasing the area of effect around the circle elements? Maybe putting an invisible square either behind or in front? I am still getting to grips with front-end stuff and any pointers here would be great.
That’s the right idea: transparent rects behind each circle. (Or transparent continent-shaped paths based on geo data, depending on what you’re going for.)
The trick is to use the SVG CSS property pointer-events. Setting it to fill or all should do the trick.
I am creating a hexmap chart using svg element in d3js. The chart is working fine though I need to reduce the size of the hexagons and is unable to.
As per my knowledge, it is somewhat related to the path element of HTML
This is what my path element looks like:
<path d="M395.1641842489362,-477.03703703081476L431.0882010021053,-456.29629628799995L467.0122177552744,-477.03703703081476L467.0122177552744,
-518.5185185164444L431.0882010021053,-539.2592592592592L395.1641842489362,-518.5185185164444Z" class="border" fill="rgb(240, 75, 35)" stroke="#FFFFFF" stroke-width="3"></path>
Please let me know if you have any idea around it!
I don't see the whole picture but every element can be transformed. For example if you want to scale down your path, just add the property transform="scale(0.75)" to your tag. The number is a multiplier, so 0.75 means 25% smaller. 0.5 would mean half the size.
I have a list of point that represent a graph contained in a svg:group.
My html is currently:
<svg id="parent">
<g id="child">
<!-- graph list of points here -->
</g>
</svg>
Because the points are computed on user input, they can be far or not from each other but it will always be a point at the origin (0,0).
I would like to center and scale the child group in its parent in order to see all the points of the graph.
I tried to used transform on child and it center the origin point but not the whole graph.
Can someone explain me how to do? I also use d3.js to place the points.
Say I have a very basic SVG:
<svg viewBox="0 0 100 50">
<path transform="translate(X,Y)" fill="none" stroke="red" d="M11,11.1c-3.9,1.2-12.4,9-10.4,12.2s14.9-0.8,15.5-2.1s-4-2.7-4-2.7"></path>
<text transform="translate(10,25)">Hello World.</text>
</svg>
I know the height and width of the <path> (from some other algorithm) and the position of the <text> (from the transform attribute shown above).
How can I know the X and Y coordinates of the letter W?
My goal here is to set the translation of the path so that it appears just below the letter W.
To give you a better idea of the end goal, here's what I'm trying to do: I want to automatically replace all <text> in a svg by paths that I've drawn to match the font (Permanent Marker). This way I can create a realistic handwriting effect (see here for a live demo: whiteboard-comics.com/good_time_for_drinking=f(week_day))
So far, I start with a <text> and my images look like this:
Then I replace by hand, letter by letter, in Illustrator, the entire text. And it end up looking like this:
And when I do it algorithmically (just based on the coordinates of the <text> element and the width of each hand drawn character as a <path>), it becomes this: