logo
down
shadow

SVG - Follow rotated path


SVG - Follow rotated path

By : Hillary Jollimore
Date : November 17 2020, 11:58 AM
seems to work fine You have two possible solutions for this issue. Either you will have to put the and inside a group and apply transformations to the group Or find actual point on path and then find the transformed point by applying the transformation matrix.
Solution 1
code :
var len = firstOrbit.getTotalLength();
var circleA = s.circle(0,0,10);

var group = s.g(firstOrbit,circleA);
group = group.transform('r75,400,400');
var pt = s.node.createSVGPoint();
Snap.animate(0, len, function(value){
    var movePoint = firstOrbit.getPointAtLength(value);
    pt.x = movePoint.x; 
    pt.y = movePoint.y;
    movePoint = pt.matrixTransform(firstOrbit.node.getCTM());   
    circleA.attr({ cx: movePoint.x, cy: movePoint.y });
}, 2000, mina.linear);


Share : facebook icon twitter icon
Inner div inside an outer rotated div does not follow mouse in case dragging with jQuery UI

Inner div inside an outer rotated div does not follow mouse in case dragging with jQuery UI


By : dubhe
Date : March 29 2020, 07:55 AM
I hope this helps you . Here is my approach to this problem.
http://jsfiddle.net/2X9sT/21/
How to let not rotated text follow a rotated div?

How to let not rotated text follow a rotated div?


By : TinekrStack
Date : March 29 2020, 07:55 AM
this one helps. I do not believe this is possible with CSS transformations (as you have seen), instead you should look at shape-inside. This will let you define a shame that you want the text to be contained in. However as you can see from the link, support isn't great at this time. Would SVG be a better solution? Here is an example of this approach (source):
code :
shape-inside: circle(160px at 400px 60px);
d3.js v4, how do I have a line follow the mouse on hover, but also have a circle follow the path?

d3.js v4, how do I have a line follow the mouse on hover, but also have a circle follow the path?


By : Victor Barzana
Date : March 29 2020, 07:55 AM
With these it helps Updated Fiddle: https://jsfiddle.net/3wzLv9yg/2/. There are a few things that are going awry:
Line Circles
code :
var mousePerLine = mouseG.selectAll('.mouse-per-line')
  .data(data)
  .enter()
  .append("g")
  .attr("class", "mouse-per-line");
var xDate = x.invert(mouse[0]),
    bisect = d3.bisector(function(d) { return d.x; }).right;
    idx = bisect(d.values, xDate);
var xDate = x.invert(mouse[0]);
d3.select(this).select('circle')
  .attr('cy', pos.x)
  .attr('cx', pos.y);

// return position
return "translate(" + mouse[0] + "," + pos.y +")";
// return position
return "translate(" + mouse[0] + "," + pos.y +")";
SVG path follow flipped & rotated + not following path

SVG path follow flipped & rotated + not following path


By : Ridge Kennedy
Date : March 29 2020, 07:55 AM
Any of those help :
sorry, this is just a partial answer: your svc is transformed with scale(1,-1) (that flips it upside down) and then the css scales the svg to 100% screensize, but the followed path still has the same size.
code :
<div class="cont">


<div class="will_follow"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="810" viewBox="0 0 1440 810" style="stroke-linejoin:bevel;stroke-width:0.5">
<g font-family="Times New Roman" font-size="16" style="fill:none;stroke:black">
<g style="fill:#5ccf43;stroke-width:7">
<path d="M0 810L0 0C0 0 0 0 0 0L1440 0C1440 0 1440 0 1440 0L1440 810C1440 810 1440 810 1440 810L0 810C0 810 0 810 0 810Z"/>
</g>
<g stroke-width="0.5">
<g fill="#fdf4ad">
<path d="M0 810L0 597.6 0 597.6 0 700.9C3.1 701.1 191.4 692.6 184.4 597.3 184.4 582.2 196.7 569.9 211.9 569.9L295.3 569.9 295.3 413.5 209.8 413.5C194.6 413.5 182.3 401.2 182.3 386.1L182.3 209.9C182.3 194.8 194.6 182.5 209.8 182.5L1151.9 182.5C1167.1 182.5 1179.3 194.8 1179.3 209.9L1179.3 377.4C1179.3 392.6 1167.1 404.9 1151.9 404.9L1040.5 404.9 1039.8 491.4C1039.7 506.4 1027.4 518.6 1012.4 518.6L793.4 518.6C778.3 518.6 766.1 506.4 766 491.4L765.2 359.3 545.7 359.3 545.7 627.6 930.6 627.6C945.7 627.6 958 639.9 958 655L958 700.5 1440 700.5 1440 755.3 930.6 755.3C915.4 755.3 903.1 743.1 903.1 727.9L903.1 682.4 518.3 682.4C503.2 682.4 490.9 670.1 490.9 655L490.9 331.8C490.9 316.7 503.2 304.4 518.3 304.4L792.5 304.4C807.6 304.4 819.8 316.6 819.9 331.7L820.7 463.8 985.1 463.8 985.8 377.3C985.9 362.2 998.2 350 1013.3 350L1124.5 350 1124.5 237.3 237.2 237.3 237.2 358.7 322.8 358.7C337.9 358.7 350.2 371 350.2 386.1L350.2 597.3C350.2 612.4 337.9 624.7 322.8 624.7L239.3 624.7C237 656.8 232.7 693.2 239.3 722.8 249.4 772 57.3 781 58.3 810L0 810Z"/>
</g>
</g>
<path id="followme" d="M0 785.3C75.3 700 167.9 747.1 204 645L216.4 597.3 322.1 597.3 322.1 386.1 209.1 386.1 209.1 209.9 1151.3 209.9 1151.3 377.4 1012.6 377.4 1011.7 491.2 792.7 491.2 791.9 333.2 520.3 333.2 520.3 655 929.9 655 929.9 727.9 1440 727.9" style="fill:none;stroke-linejoin:round;stroke-width:0.8;stroke:#f00"/>
</g>
</svg>
</div>
var path = anime.path('#followme');

anime({
  targets: '.will_follow',
  translateX: path('x'),
  translateY: path('y'),
  rotate: path('angle'),
  easing: 'linear',
  duration: 10000,
  loop: true
});
.cont {
  width: 100%;
  height: 100%;
  position: relative;
}

.will_follow {
  height: 10px;
  width: 10px;
  background-color: red;
}
How to make parent div follow the height of a 45 degree rotated child div

How to make parent div follow the height of a 45 degree rotated child div


By : user3038030
Date : November 24 2020, 05:48 AM
will be helpful for those in need For maximum flexibility (no matter what size the green square has) - use javascript to calculate the new height by looking at this like a right triangle, and using the Pythagoras Theorem:
if the formula is: a²+b²=c²
code :
let $a = $('.child-diamond').width(),
$b = $('.child-diamond').height(),
$c = Math.sqrt((Math.pow($a, 2)) + (Math.pow($b, 2)));

$('.parent-container').height($c);
Related Posts Related Posts :
  • How to change add and remove active class in JavaScript
  • how to toggle a specific div in javascript
  • How to get all the values from multiple keys of an array of object?
  • jQuery bind() unbind() and on() and off()
  • regular expression to find DD Month YYYY from a string
  • How to upload files from web client (HTML/jQuery form) to your Dropbox folder
  • Backbone history and require.js issue
  • Confusion over Classical and Prototypal Inheritance Javascript
  • How to take screen shot of current webpage using Javascript/JQuery?
  • Store meridiem in a variable
  • class declared inside closure vs standard class without closure
  • javascript confirm box always return true
  • dynamically changing the size of font size based on text length using css and html
  • Node.js - Getting the host IP address while on Amazon EC2
  • Confusing CSS, can anyone explain please
  • How to install v8-profiler on Windows 8 (64 bit) using npm?
  • Resolve promise based on another promise
  • google maps adding overlay layer above UI and markers
  • Style specific letter?
  • RangeError: Maximum call stack size exceeded with array.slice
  • node rest client get with local variable
  • If condition not executes while mouse move fastly
  • Count the number of displayed elements in a HTML list
  • Locate JavaScript source code in Emacs
  • Clean, Modular Code vs MV* Frameworks
  • infinite scroll without loading image
  • Backbone: reverse collection order with comparator
  • What do printers ignore?
  • jQuery UI .tabs() Contentless tab?
  • Execute Javascript alert() after page (visually) loaded
  • JavaScript - duplicating array doesn't work
  • Excessive clickable area below image
  • JavaScript Regex: Replace |b| with <b>
  • Unexpected value change in 2D array in JavaScript
  • Function doesnt see parameter as a array of objects
  • jQuery fetch keypress event on chrome and IE
  • How to enable jquery validate localization?
  • Cassandra map collection returned by node.js Helenus looks odd
  • angular ng-repeat with multiple filter options
  • Selecting Children without ID or Class names
  • How to uncheck a group of checkboxes when another checkbox is checked
  • Is hiding content by Javascript or jQuery Worth trying
  • Load XUL resource using javascript
  • XML to HTML text area from server file system
  • set focus() on textbox on form onload
  • es lint '' is assigned a value but never used' eventhough i have used it
  • Can "name" attribute be used for custom VueJS components
  • Get innerHTML of content when it is clicked
  • HTTPS causes CSS animations to not load? Very confused
  • How to hide other div apart from touched div to the band
  • Is global variable assignment atomic on NodeJS?
  • Datepicker onchangemonthyear beforeshowday
  • trying to render html files using jade but it still adresses it as a jade
  • Google Analytics - Understanding and Dissecting the Snippet: What is | | [ ];
  • Replacing "[aA09.b]." to "[aA09.b]\n" in in JavaScript
  • Why wrap a function definition in an immediate function?
  • Enable / disable jQuery script on switching to different tab in a HTML page
  • how can find return variable value outside anonymous function in node js mysql query function
  • Converting 1 to 0001 in javascript array
  • svg viewbox should not resize the text fontSize?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org