i am in a situation where i need to Fill Svg path with different rects. here 'different' means each rect will be a separate svg element, and i can access it using id i.e document.getElementById('rect_');
I cannot use 'Patterns' because they fill path but i can't access each element separately .
let say i have path :-
<path d="M 10 10 L 50 10 80 125Z" stroke="red" fill='none' />
Now i need to fill this path with rects. Rect specs are:-
<rect x=0 y=0 width=5 height= 5 stroke="red" />
*I can convert path into points (x y cordinates) but unable to make logic to create rects inside that path.
Explanation:-
Let me explain the whole senerio , i am developing an application in svg in which user can draw his custom path (just like painting) , once he finishes his drawing, path will be closed and then i need to fill that path with 'n' number of 'rects' . now i need to determine how many rects will be drawn and at what place . Rects must be inside that path area.
I need help on this,
thanks.
Related
I'm working on a project that requires bounding draggable elements inside complex shapes, defined ideally by SVG Path elements, using Javascript.
I'm open to other ways of defining the bounds but SVG would tie in better with the source material.
I've tried using pathSegList however this returns undefined, and I've read it's deprecated.
How would I go about getting a list of coordinates from an SVG path element, which I could translate to X/Y coordinates for Javascript?
You can use the .getBBox() method on the path element. Take a look at the snippet:
console.log(document.getElementById('mypath').getBBox());
<svg width="300" height="100" viewBox="0 0 300 100" style="background:#efefef">
<path id="mypath" d="M20,20 L40,20 40,40, 20,40 Z" fill="red" />
</svg>
i want to ask you about change SVG elements into SVG main element.
Let's suppose that the black square is a main SVG element. I want to change element 1,2 and 3 to diffrent SVG element. I need to do this by JS code but i don't know how to prepare SVG image for this action. When i simply change the path of element in SVG tag, the changed element isn't in good location on main SVG image.
What i will need to know about SVG and changing SVG elements path to achieve wanted result? Because, copying the path from new SVG image, just to main SVG image as element doesn't work well
Maybe easiest way to understand it, is the shoe customize. On main SVG i have a shoe image with raw elements of shoe (TONGUE and HEEL). I have 5 diffrent TONGUES and HEELS. When i click on shoe TONGUE, i want to be able to choose one of five TONGUES (same with HEEL). When i choose new TONGUE for shoe, the main SVG image need to change TONGUE to new choosen TONGUE (same with HEEL).
I think that i need to change element path to change the image but i don't know if it's a proper way
Thank You in Advance,
Best Regards.
I would use <symbol>s with the same viewBox or al least the same ratio. You can <use> those symbols and the x,y, width and height would be always the same for the same spot.
Next comes an example where I'm changing the icon dynamically on click.
const SVG_XLINK = "http://www.w3.org/1999/xlink";
demo.addEventListener("click",()=>{
let actual = volume.getAttribute('xlink:href');
if(actual == "#volume_up"){
volume.setAttributeNS(SVG_XLINK, 'xlink:href', '#volume_off');
}else{volume.setAttributeNS(SVG_XLINK, 'xlink:href', '#volume_up');}
})
svg{border:1px solid;width:90vh}
<svg id="demo" viewBox = "0 0 100 100">
<symbol id="volume_up" viewBox='0 0 24 24'>
<title>volume up</title>
<path d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'></path>
</symbol>
<symbol id="volume_off" viewBox='0 0 24 24'><title>volume off</title>
<path d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'></path>
</symbol>
<use id="volume" xlink:href="#volume_off" x="35" y="35" width="30" height="30"/>
</svg>
After spending quite some time on this problem without any success, I decided to post my (first!) question here.
For a project I used topojson to plot part of a map. In my SVG I have some groups containing some points (which I placed using the geojson.io tool).
The map looks like this: plotted map
The structure of the code looks like this:
<svg width='1300' height='900'>
<g class="gate" id="D5">
<path d="M645.3426080089994,434.9821086442098m0,4.5a4.5,4.5 0 1,1 0,-9a4.5,4.5 0 1,1 0,9z"></path>
</g>
<g class='gate' id='d4'>
<path d="M605.3552137160441,383.2755208062008m0,4.5a4.5,4.5 0 1,1 0,-9a4.5,4.5 0 1,1 0,9z"></path>
</g>
</svg>
What I'd like to do is append some SVG based on some condition on the exact location of these points. Now while I know how to append SVG's, I'm having trouble extracting the coordinates of the point on the map. The SVG that I would like to append must be placed upon the points in the map. However, when for example I append a circle to the group, the coordinates that I enter are not considered relative to the point, but rather absolute to the whole SVG area. The circle ends up in the upper left corner instead of on the actual point.
I attempted to extract the coordinates of each point in order to use this data for plotting, but I have not yet succeeded. I managed to get the node by using:
d3.selectAll('#D5').select('path').node()
Which returns:
<path d="M605.3552137160441,383.2755208062008m0,4.5a4.5,4.5 0 1,1 0,-9a4.5,4.5 0 1,1 0,9z"></path>
When I look inside the path object, I see that deep inside the __ data__ element there are some coordinates, but I'm not able to extract these.
This issue wouldn't be a problem if I defined the coordinates for the point at start. However, due to the fact that this is topojson, the whole image is just a composition of path elements.
How can I plot a SVG on the points without explicitly defining coordinates beforehand? If any more information is required, please let me know.
Thanks!
What you are looking for is the getBBox() function
d3.selectAll('#D5').select('path').node().getBBox()
// { x: 640.8425903320312, y: 430.48211669921875, width: 9, height: 9 }
See https://jsfiddle.net/7zahj9gt/
I have an svg viewbox element to draw waveform as follows:
<svg id="waveform" viewBox="0 -1 2000 2" preserveAspectRatio="none">
<g id="waveform">
<path id="waveform1" d="{{some data}}"/>
</g>
</svg>
It plots the waveform as expected. However it doesn't give me the x and y label of the viewbox, is there any alternate way by which we can add the x and y label of viewbox on webpage?
Your svg is rendering a single path, the waveform. If you want labeled axes to be drawn, you need to render them. For example, inspect the source of these SVG graphs with labeled axes: http://www.goat1000.com/svggraph-titles.php. You'll probably want to use a library to do this.
The svg element is not a "smart" graphing widget, it is a plain canvas.
The viewbox attribute on the svg element sets the coordinate system within which the content of the svg is drawn (its internal dimensions, as opposed to the actual pixel dimensions when it is rendered).
I have the following Highcharts (http://www.highcharts.com) scatter chart. Note that the axes start at -10 and stop at 10, with 0 in the middle. I want each 0 line to be a different width or color from all the others. Should be easy but I can't find in the API documentation how to do. All I can find is how to change properties for all lines. Has anyone done this or have suggestions?
Outside of the API I looked into using Javascript (specifically jQuery) to update the element's style but the only specific part (d) I could easily use to find which line to update isn't always the same. The element looks like.....
<path stroke-width="10" opacity="1" stroke="#D8D8D8" d="M 293.5 72 L 293.5 502" fill="none"></path>
Thanks.
You can implement plotLines. Check this out.
In yAxis, I have set a green line at value of 70.
In xAxis, I have set a blue line at value of 170.
You may play around with the color and width as well.