draw a 1000-wide rectangle with svg. I want to get the relative position of the pointer in the rectangle when the mouse moves. How should I write it?
for example, move horizontally to the middle, and x is 500. The code is as follows:
http://jsrun.net/kdgKp/edit
you have to listen for mouse events on an immutable element, otherwise you won't mess up
function handleMouseMove(event) {
// console.log(evt)
const width = document.getElementById('container').scrollWidth;
const offsetX = event.offsetX
console.log(width,offsetX,event)
document.getElementById('rect').setAttribute('x',offsetX/width*1000)
// const im = evt.target.getScreenCTM();
// const svg = evt.target.ownerSVGElement;
// const pt = svg.createSVGPoint();
// pt.x = evt.clientX;
// pt.y = evt.clientY;
// const p = pt.matrixTransform(im);
// console.log(p.x, p.y);
}<svg version="1.1" baseProfile="full" width="100%" height="200" viewBox="0 0 1020 200"
xmlns="http://www.w3.org/2000/svg" style="border: 1px solid red" id="container" onmousemove="handleMouseMove(event)">
<g transform="translate(10,0)">
<rect id="rect" x="0" width="1000" height="90%" fill="-sharp33546F"/>
<line x1="100" x2="100" y1="0" y2="90%" stroke="-sharpccc" id="line" />
</g>
</svg>Previous: How to escape a string with single quotation marks in PHP?
Next: Can the crawler write pictures and text and save them at the same time?
<image>< image>< svg> <script> const aa = document.getElementById( aa ) const bb = document.createElement( svg ) bb.innerHTML = aa.innerHTML bb"<img>""<image>< imag...
the svg string is generated by code as follows: <svg id="SvgjsSvg1001" width="500" height="50" xmlns="http: www.w3.org 2000 svg" version="1.1" xmlns:xlink="http: www.w3.org 1999 xlink" xm...
1. The designer designed the following graph, which is very similar to the force map, so that it can be implemented on the page, and each circle in the graph can click on the trigger event. 2, my current two ideas: (1) simple and rude html+css. In...
when converting fonts (using iconmoon), the following error is found, and some svg cannot be displayed after conversion I wonder if there is something wrong with the svg designed for me. < polyline> < g> < g> < g&g...
Business background in the page of designing a bank card , you need a lot of bank logo icons it s obviously troublesome to find the full icons yourself question excuse me, do you have a ready-made sprite map of the bank? or font icon or svg ic...
demand: as the screen slides, div moves according to a complex svg route, including rotate angle question: can I get the coordinates and radians of a point on the svg path path as needed? chase: ladies and gentlemen, if you have api, you will win an ap...
Hello, I try to use the SVGA plug-in to export animations on AN, and AN keeps reporting errors as follows: "WARNINGS: Frame numbers in EaselJS start at 0 instead of 1. For example, this affects gotoAndStop and gotoAndPlay calls. " (4) " my AN anim...
this is the effect I saw on a website svgpath AI the path drawn will use c, I don t want to use cubic Bezier curve in path, because I also want to adjust the path in js, too complex will not be easy to tune, how to output only M and L paths (like...
recently, I want to learn to do svg animation, but I don t know how to do it for the time being. Can illustrator do svg animation? Ask the great god for more guidance. ...
how can I use fill to change the color of svg pictures in WeChat Mini Programs? ...
learn the radialGradient method of svg effect my understanding is, from the point (fx, fy) = > point (cx, cy), but I do not know how to understand this radius, I hope the boss who knows it will specify it. Thank you? ...
Click the text in the < text > tag in svg, so that it can edit the text in real time. how to achieve this? the effect is shown in figure 2, under the help of God . ...
background: d3.js draws a tree with zoom, and the screen will not display when enlarged, so that the downloaded picture will not be fully displayed. So, you want to get the width and height of g under svg <svg> <g class="content&quo...
background: d3 tree drawing, download demand question: method is used. The url, that converts svg to img is displayed on the page with an img tag. The picture goes like this: svg: idea: do I need to maintain a style when I download it? Can y...
There is a little svg file named t.svg below: -sharpifndef SVG_WIDGET_H -sharpdefine SVG_WIDGET_H -sharpinclude <QWidget> -sharpinclude <QtSvg> -sharpinclude <QVBoxLayout> -sharpinclude <QPushButton> -sharpinclude <QDomDocum...
Overview I want to use the svg-sprite-loader package to handle the SVG icon, referring to vue-element-admin . index.js on Github. question I follow the teacher s tutorial Portal to configure webpack. . but found that looking at the defaul...
as shown in the picture, draw a picture with canvas. now add an arrow icon pedestrian icon to the diagram. The icon can be changed in different colors (red, yellow, green and gray) consult the implementation plan the method that comes to mind so f...
svg uploaded with AI software usually has only style can you specify some parameters for each shape, such as name or id? Can or other ways and software achieve this function ...
<svg xmlns="http: www.w3.org 2000 svg" xmlns:xlink="http: www.w3.org 1999 xlink" version="1.1" style="width:calc(100% - 20px); height:300px; padding:10px; "> <path d="M0 0 C191.8 0, 191.8 0, 383...
the real problem at present: we need a general method of drawing the connection path drawLinePath . let drawLinePath = (node1,node2nodes) => { node1node2 return linePath; } more: according to the current algorithm and demand analysis, the i...