move image using java script and html css - javascript
I want to move a image in a path using js and html.
is that doable?
please check the image to get better idea about my question. are there any example codes or libraries? so I can study and edit to match into my case.
There are multiple ways to approach this problem.
Modify html image css styling via javascript.
add css styling via javascript.
styling to move/rotate : transform: translate(20px,10px) rotate(0.5turn);
change styling using pure css animations #keyframes more here
Display stuff on <canvas> element via javascript more here
Animated svg, or svg with css animation.
Inline svg animated via javascript or css.
I am for now just going to demonstrate the svg approach.
SVG approach (no javascript)
My preferred approach would be to create a svg containing multiple images, and then animate it. The bellow example is just using circle objects, but images should work too using <image href="">.
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<path id="movepath" d="M 5 5 C 10 10, 20 10, 25 5" stroke="#aaa" stroke-width="1" fill="none" />
<circle cx=5 cy=5 r=2 fill="#aaa"/>
<circle cx=25 cy=5 r=2 fill="#aaa"/>
<circle r=1.5 fill="#000">
<animateMotion dur="1s" repeatCount="indefinite">
<mpath xlink:href="#movepath"/>
</animateMotion>
</circle>
</svg>
I don't know if I had understood your question, but I try to answer you.
If I should to do this, "move rocket from earth to sun" I would do it like this:
I'll create 3 img.
img rocket;
img earth;
img sun;
With CSS I will set the Rocket img movement from img earth to sun. Html is not request.
Related
SVG convert <g> tag to an <image> tag containing base64 PNG URI (read more)
I got an interesting problem (I hope!) I have noticed that there are two "types" of SVGs First we have the conventional SVG file with and tags for example: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 841.89 1190.55" style="enable-background:new 0 0 841.89 1190.55;" xml:space="preserve"> <g id="Background"> <rect id="Color1" class="st3" width="840.94" height="1190.55"/> <g id="Texture" class="st4"> <path class="st5" d="M843.67,410.13c-73.29 ... Secondly we have embedded tags in the image, not sure what to call them, so I've just named them "fake SVG", an example: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="3718" height="4899" viewBox="0 0 3718 4899"> <image id="Lager_1" data-name="Lager 1" width="185.9" height="244.95000000000002" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUh ... My question is: Is there is any smooth way to convert a conventional SVG into a "fake" SVG? (please tell me if they have a real name). Also keep in mind that I would like to keep the groupings so each <g> should convert to a <image> tag My thoughts: I am thinking about loading the conventional SVG into a <canvas> tag, it seems to be able to understand the <g> groupings in the conventional SVG well and consistently, and from there, somehow, convert those groups individually into base64 PNG URI, and reconstruct it into a fake SVG, perhaps there should be some library out there that can help out, does anyone have any ideas?
I'm not sure if this will exactly answer what you are trying to do, but you can do this: <image id="something" href='data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" .../>' /> Where you can just embed the original SVG as a string in the href when the encoding is set to data:image/svg+xml;utf8. This will render the SVG in an <image> tag, but not in Base64 (I could not get this working, but there may be a way). Source: https://css-tricks.com/probably-dont-base64-svg/
It is possible to convert an inline SVG with tags in the DOM to an image data-url. You just need to turn it into one like this: imageTag.src = 'data:image/svg+xml,' + window.escape(svgTag.outerHTML); The imageTag version can not have external links embedded in the SVG. It also needs width and height attributes on the SVG tag otherwise it will not show in some browsers. You could also draw this image to a canvas to rasterize the image, but as the comment mentioned that would only make it uglier if scaled. If you want to convert it to a SVG file you should add this as a first line and then add the outerHTML of the svgTag. <?xml version="1.0" encoding="UTF-8"?> You can save the file with the .svg extension
How can I divide an image into hoverable sub sections?
Is there someway I can have hover only access the exact dimensions of the colored areas of this head (not the excess corners of the box model)? If I was creating a website where you could hover over the sections of the human body and click for information regarding the clicked section, would I have to piece the body together with individual divs or is there a better way to divide an image into hover selectable sections? (not sure if im using the correct terminology!) Just to reiterate, I only want to be able to select the colored areas in their exact dimensions (not white space outside of the colored sections/outside of the box model). Any suggestions?
Maybe <map>/<area> elements could of help: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area
HTML <map> tag is what you are looking for. An image-map is an image with clickable areas. The required name attribute of the element is associated with the 's usemap attribute and creates a relationship between the image and the map. The element contains a number of elements, that defines the clickable areas in the image map. You can have your detailed step-by-step turorial HERE and some detailed explanation HERE.
If your image would consist of strict rectangles only there would be easier options. Anyway, you can load the image into a vector drawing application like Illustrator and trace the outlines of the shapes by hand. After that's done export the drawing as a .svg. If you take a look at the svg file you will see that the individual shapes are stored as tags. For example: <path fill="#44CACF" d="M42.124,213.07l64.5-1l-1.5,66l-51.5,35C53.624,313.07,14.124,246.57,42.124,213.07z"/> If you give these an id attribute <path fill="#44CACF" id="partC" d="M42.124,213.07l64.5-1l-1.5,66l-51.5,35C53.624,313.07,14.124,246.57,42.124,213.07z"/> you can access it using javascript and add mouse events as you desire. Here's an example: function enter(e) { e.target.style.opacity = 0.5; } function leave(e) { e.target.style.opacity = 1; } document.getElementById("partA").addEventListener("mouseenter", enter); document.getElementById("partB").addEventListener("mouseenter", enter); document.getElementById("partC").addEventListener("mouseenter", enter); document.getElementById("partD").addEventListener("mouseenter", enter); document.getElementById("partE").addEventListener("mouseenter", enter); document.getElementById("partA").addEventListener("mouseleave", leave); document.getElementById("partB").addEventListener("mouseleave", leave); document.getElementById("partC").addEventListener("mouseleave", leave); document.getElementById("partD").addEventListener("mouseleave", leave); document.getElementById("partE").addEventListener("mouseleave", leave); <svg version="1.0" id="Layer_1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="247.741" height="344.813" viewBox="0 0 247.741 344.813" overflow="visible" enable-background="new 0 0 247.741 344.813" xml:space="preserve"> <path fill="#CF454B" id="partA" d="M14.624,131.57c0,0-2-44,13.5-67s32.5-39,55-45.5s40-7.5,55.5-5s36,4,46,12.5s30,30,36.5,39 s15.5,26.5,15.5,35.5s2.5,15,0.5,19.5s-15.5,14-21,15s-201.5,2-201.5,2V131.57z"/> <path fill="#7F45CF" id="partB" d="M14.124,140.07l203-2.5c0,0,17-9,20-12.5s0.5,11.5,0.5,11.5l-4.5,18l-5.5,23.5l-15,29.5l-170,2.5 C42.624,210.07,5.624,178.57,14.124,140.07z"/> <path fill="#44CACF" id="partC" d="M42.124,213.07l64.5-1l-1.5,66l-51.5,35C53.624,313.07,14.124,246.57,42.124,213.07z"/> <path fill="#44CACF" id="partD" d="M142.124,211.57l70.5-0.5c0,0,1.5,88.5-20,104.5s-25-42-51-56L142.124,211.57z"/> <path fill="#45CE7C" id="partE" d="M108.624,213.57l-1.5,63.5l-53.5,36c0,0,49.5,57.5,124.5,10c0,0-13-23.5-17-32.5s-20.5-24.5-22.5-26 s2-49.5,2-49.5"/> <g> <g> <path fill="none" d="M59.624,333.57c-9-11.5-17-22-23-35.5c-2.5-5.5-5-11.5-6.5-17.5c-0.5-3-0.5-7-2-9.5c-1.5-5-6.5-7.5-9.5-12.5 c-7.5-12.5-22-47.5-15.5-62c3.5-7.5,12.5-5,14.5-13c2-7.5-5.5-17-6.5-24.5c-1-10.5,0-21.5,0-32c0-10-1.5-21,0-31 c2.5-19,20-37.5,31.5-52c11.5-15,27-23.5,44.5-31c13-5.5,28-10.5,42-11.5c10-0.5,19.5,3.5,29,6c20,5.5,38,12,52,28 c13,15.5,21,31,27,50c5,17,10.5,33.5,9,51.5c-2,19.5-16.5,33-21,51.5c6.5,2.5,12.5-1.5,16,6.5c2.5,6.5,0,17-1,23.5 c-1.5,9-2.5,19.5-6.5,27.5c-5,10-14.5,16-19.5,26c-7.5,15.5-1.5,35.5-16.5,47.5c-11.5,9-28.5,13.5-42,18.5c-17,5.5-34,5-52,5 c-15,0-32-0.5-44.5-10.5"/> <path d="M60.762,332.604c-9.078-11.613-17.466-23.343-23.539-36.839c-3.107-6.904-5.255-13.645-6.37-21.11 c-0.841-5.631-4.562-9.469-8.302-13.416c-6.492-6.854-10.047-17.929-13.238-26.606c-3.649-9.927-7.015-21.035-6.2-31.732 c0.423-5.549,2.972-8.828,7.999-11.088c3.796-1.707,6.611-3.603,7.912-7.725c1.328-4.208-0.39-8.836-1.904-12.738 c-1.039-2.677-2.266-5.276-3.301-7.955c-1.67-4.322-1.583-8.987-1.648-13.553c-0.107-7.544,0.4-15.087,0.439-22.631 c0.042-7.941-0.794-15.854-0.619-23.801c0.327-14.881,7.469-27.208,16.122-38.86c7.877-10.607,16.325-22.004,26.267-30.735 c10.153-8.917,22.654-14.903,35.021-20.081c14.179-5.937,30.953-12.106,46.565-10.361c7.387,0.826,14.504,3.658,21.641,5.597 c6.507,1.769,12.952,3.758,19.259,6.148c12.759,4.834,24.456,12.177,33.223,22.746c8.938,10.775,15.94,22.884,21.225,35.825 c5.654,13.847,9.963,28.944,12.437,43.696c1.249,7.448,1.627,15.179,0.458,22.656c-1.124,7.188-4.419,13.957-7.797,20.319 c-4.792,9.026-10.096,17.707-12.687,27.692c-0.198,0.763,0.053,1.646,0.882,1.917c3.994,1.309,8.962,0.2,12.6,2.284 c5.723,3.278,3.348,14.424,2.539,19.606c-1.952,12.5-2.695,26.565-9.734,37.418c-6.213,9.581-15.568,16.064-19.245,27.304 c-3.225,9.854-2.545,20.52-5.956,30.342c-4.303,12.391-17.536,17.938-28.839,22.344c-12.355,4.817-25.046,9.401-38.232,11.149 c-13.678,1.813-27.839,1.399-41.609,1.084c-12.773-0.292-25.747-2.187-36.148-10.153c-1.531-1.172-3.236,1.277-1.712,2.445 c9.989,7.649,22.168,9.926,34.471,10.567c13.874,0.724,28.131,0.622,41.97-0.614c13.793-1.232,26.558-5.946,39.475-10.632 c10.981-3.983,23.473-8.927,30.333-18.921c5.991-8.729,5.857-20.339,7.578-30.378c1.116-6.509,3.493-12.179,7.467-17.46 c4.03-5.354,9.028-9.867,12.893-15.365c7.248-10.313,7.711-24.044,9.79-36.05c1.379-7.964,4.44-22.313-5.488-26.183 c-3.481-1.357-7.519-0.41-11.113-1.587c0.294,0.639,0.588,1.278,0.881,1.917c3.188-12.286,10.521-22.688,15.877-34.045 c5.766-12.226,6.275-24.966,4.288-38.176c-2.108-14.005-6.555-28.165-11.494-41.417c-4.563-12.247-10.906-23.686-18.659-34.191 c-7.413-10.045-16.488-18.284-27.638-24.006c-11.763-6.036-24.382-9.234-36.968-13.017c-6.304-1.895-12.56-3.687-19.155-4.15 c-7.216-0.506-14.777,1.344-21.713,3.096C97.538,6.597,84.376,12.106,72.02,18.524c-10.839,5.629-20.65,12.879-28.608,22.182 C34.829,50.739,26.2,61.18,19.102,72.324c-7.223,11.34-10.278,22.922-10.105,36.327c0.095,7.343,0.71,14.653,0.604,22.003 c-0.111,7.689-0.652,15.384-0.306,23.075c0.272,6.046,1.634,10.702,4.006,16.22c2.646,6.154,5.938,14.373-1.634,18.324 c-3.538,1.846-6.774,2.956-9.169,6.337c-2.165,3.056-2.443,7.521-2.493,11.111c-0.136,9.845,2.954,19.747,6.165,28.942 c2.935,8.405,6.375,17.402,11.316,24.872c3.981,6.018,9.499,9.415,10.644,17.082c1.08,7.229,3.453,13.727,6.397,20.428 c6.045,13.762,14.749,25.707,23.959,37.49C59.671,336.053,61.946,334.12,60.762,332.604L60.762,332.604z"/> </g> </g> </svg>
Using .setAttribute() to Resize SVG not Working
I have a page displaying a d3 graph. This page also supports PDF exporting, and I am using the pdfkit library with the SVG-to-PDFKit extension. The issue I am having is that the graph on the page is very large to fill the width of the page, but this makes it too large when generating it to PDF. I have spent a lot of time researching how to resize the SVG's content (not just the view the SVG resides in) and there doesn't seem to be an already created function in the SVG-to-PDFKit library. I found an answer that makes sense, but only occasionally works whenever chrome tools is up: How can I resize an SVG? If there is a better solution, I would love to know. My main issue is that the graph has to be resized after it is generated on the page, so that it doesn't skew the graph on the page, but only alters the graph on the PDF. The code I have that occasionally works is: var chartSVG = document.getElementById('chartSVG'); chartSVG.setAttribute("style", "viewBox: 0 0 32 32;"); SVGtoPDF(doc, chartSVG, 20, 170); Is there possibly another attribute out there that would be better for the scenario? And does the line of code look like it's written correctly? I don't understand why it will only work when Chrome tools are up. Thanks in advance.
You definitely can resize SVG with setAttribute as well as with style property or via css: var red = document.getElementById('red'); red.setAttribute('height', '50'); var green = document.getElementById('green'); green.style.width = '100px'; #blue {width:60px} <svg id="red" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="49" fill="red"/></svg> <svg id="green" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="49" fill="green"/></svg> <svg id="blue" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="49" fill="blue"/></svg>
CSS Targeting Individual Paths through SVG -> Use tag
I'm having huge problems animating an ellipsis icon to jiggle the little dots up and down in a wave. I suspect that because its in the shadow DOM I can't target the individual path elements specifically, however is there a work-around? DOM looks like this: <svg class="icon__vector"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-ellipsis"></use> </svg> Where the href link links to this SVG hardcoded in a sprite sheet in which I can edit if needed. <svg id="icon-ellipsis" width="100%" height="100%" viewBox="0 0 24 24"> <path className="icon-ellipsis-dotone" d="M6 11.59c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path> <path className="icon-ellipsis-dottwo" d="M14 11.59c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path> <path className="icon-ellipsis-dotthree" d="M22 11.59c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path> </svg> EDIT: So i have an ellipsis icon something like this "O O O" and i its loaded in with a <use> tag and i want to be able to target each individual dot and animate them differentely. I can edit the master sprite sheet, use javascript or css however no jquery. Problem is that there is no way to target the individual paths because they exist in the shadow DOM
You can't use CSS or JS to target the referenced elements through the <use>. You can animate the targeted sprite directly. However that means that, if the SVG is referenced more than once, all those instances will be animated at the same time.
How do I assign an ID to SVG code?
I have an SVG code for a map. This code is part of the map <circle opacity="0.33" fill="#913A3A" stroke="#CDC9C4" stroke-miterlimit="10" cx="273.5" cy="231.9" r="18.6"/> I want to change its fill color on button click. I added the button code. I am aware of the JavaScript code with it. However, when I assign an ID for this code and test it out like this <Pathid = "path1" circle opacity="0.33" fill="#913A3A" stroke="#CDC9C4" stroke-miterlimit="10" cx="273.5" cy="231.9" r="18.6"/> The circle disappears from the map. How can I deal with that? This is the JavaScript that I used $('#btn-test1').on("click", function() { $('#path1').css({ fill: "#ff0000" }); });
As far as I know, it's simply impossible to give an SVG element an ID. I would probably use a canvas element for this anyways. Please tell me if I'm misinformed.
In your example, you've replaced the <circle> element with a <pathid> custom element. You probably meant <circle Pathid = "path1".../> but the spaces around that = are going to be a problem, so <circle Pathid="path1".../> but you're trying to give the <circle> an id, not some custom Pathid attribute, so <circle id="path1".../> When changing just one CSS class with jQuery, you can be a little less verbose with the syntax .css("property","value") - in this case, that's $('#path1').css("fill","#ff0000"); Here it is all put together. Don't worry about my <svg>'s viewbox or its width - that's just some basic sizing for the demo, and won't be relevant when the circle is in your <svg>. $('#btn-test1').on("click", function() { $('#path1').css("fill", "#ff0000"); }); svg { width: 100px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <svg id="btn-test1" viewbox="0 0 40 40"> <circle id="path1" opacity="0.33" fill="#913A3A" stroke="#CDC9C4" stroke-miterlimit="10" cx="20" cy="20" r="18.6" /> </svg>