svg

问题 I would like to understand why is my SVG positioned outside the SVG container element and not at the x:0/y0 coordinates by default ? CSS: Minimal (no CSS in case, only removed margin/padding on document body) Javascript: var svg = d3.select('div#map').append('svg:svg'); svg.append('svg:g') .append('svg:text') .text('Hello word') //.attr('x', 0) //.attr('y', 0) .attr('fill', 'red'); HTML: <div class="map" id="map"></div> The text element is there, filled with red and visible but is overflowing

问题 I am trying to create a d3 SVG that draws a map of New York State and scale it so that it fits the size of my SVG, the issue I am having is that when I use .fitSize([height, width], mapObject) it only returns a NaN error in the console. the topoJSON file of NYS I am using I am able to get the map to display without scaling but of course, it is not optimized and needs to be scaled I have attempted what is said in this post but I have not figured out the correct solution var map = d3.json('./ny

问题 I'm trying to figure out why it wont morph this path data to another path data, I need to make it look like an real animation. This is my SMIL code: <animate xlink:href="#Barra3" repeatCount="indefinite" attributeName="d" dur="5s" values="M52,346L56,346C61.523,346 66,350.477 66,356L42,356C42,350.477 46.477,346 52,346Z; M54,225C60.627,225 66,230.373 66,237L66,356L42,356L42,237C42,230.373 47.373,225 54,225Z;"/> Here is my codepen: https://codepen.io/joannesalfa/pen/mdPBJxq and go line 181. I'm

问题 I want to make that wave effect over a parallax background image. So far I have the parallax effect and full-width (over parent container width). section.parallax { width: 100vw; position: relative; margin-left: -50vw; left: 50%; background-image: url(../images/parallax.jpg); // this image height: 500px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } What can I do to have that wave effect on the image top and bottom with CSS?

问题 I have this svg: My goal is to make the box move along the path while keeping its rotation. To make that happen I added an <animateMotion /> element to the square with the same path as the circle. (demo here). The path of both the circle and the animateMotion starts with M which as far as I know signals an absolute position within the SVG. For some reason, though the square is rotated by 90deg and is moving way outside of the circle (while still following a circular path). <svg width="133"

问题 i want to take out 'text value' on mouse click on anywhere on the row/svg image ,for i.e. in the below image if i click anywhere on 2nd blue highlighted row, then i should be able to get the text 'Adams' as alert. I tried to iterate thru svg elements but svg elements are created horizontally rather then vertically 回答1: you can use the 'select' event, to determine the value selected when the 'select' event fires, check chart.getSelection() google.visualization.events.addListener(chart, 'select

问题 Why SVG doesn't scale correctly in canvas (it is all pixelated and blurry) ? What am I doing wrong ? All I want is the SVG image to keep it's aspect ratio whatever the canvas size, and alose not have it becoming blurry. var canvas = document.getElementById("screen"), ctx = canvas.getContext("2d"); var img = new Image(); img.src = "http://imgh.us/perso.svg"; img.onload = function() { ctx.drawImage(img, 0, 0); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%;

问题 Trying to make an svg rectangle that moves when button pushed. Right now I just want the x to be modified by a function. function modX() { document.getElementById("rectangle").transform = 'translate(295 115)'; } var x = 20; var y = 20; modX(); <svg width="1000" height="1000" > <rect id="rectangle" x="0" y="20" width="100" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"></rect> </svg> I'm fairly new to code so please avoid css or jquery. 回答1: you can change its x by

问题 Trying to make an svg rectangle that moves when button pushed. Right now I just want the x to be modified by a function. function modX() { document.getElementById("rectangle").transform = 'translate(295 115)'; } var x = 20; var y = 20; modX(); <svg width="1000" height="1000" > <rect id="rectangle" x="0" y="20" width="100" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"></rect> </svg> I'm fairly new to code so please avoid css or jquery. 回答1: you can change its x by

问题 Trying to make an svg rectangle that moves when button pushed. Right now I just want the x to be modified by a function. function modX() { document.getElementById("rectangle").transform = 'translate(295 115)'; } var x = 20; var y = 20; modX(); <svg width="1000" height="1000" > <rect id="rectangle" x="0" y="20" width="100" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"></rect> </svg> I'm fairly new to code so please avoid css or jquery. 回答1: you can change its x by