CODEWITHSUNDEEP
svg
StevenDavisPhoto
StevenDavisPhoto

Reputation: 160

Change starting coordinate for svg line drawing?

http://codepen.io/stevendavisphoto/pen/doVOLo

<svg xmlns="http://www.w3.org/2000/svg"
height="223.5px"
width="432.7px"
viewBox="-1 -1 433.7 225.5">
    <path d="M341.6,95.3c3.4-62.2-66.9-96.3-112.5-62.7C173.7-34.9,70.7,10.7,79.5,94.4C17.8,93.4-26.4,166,18,223.5
    l396.4,0C461.3,162.7,410.9,85.8,341.6,95.3"
    stroke="#fff"
    stroke-width="2"
    fill="none"
    stroke-dasharray=""
    stroke-dashoffset="0.00"></path>
</svg>

The direction of the drawing is fine, but I'd like it to start from the lower left point, not the random point in the right middle. Can you show me how to fix it?

Upvotes: 1

Views: 2441

Answers (3)

Stuart Nelson
Stuart Nelson

Reputation: 307

I had this problem and got round it by making a tiny cut in the path. I created 3 new points and deleted the middle one. I then dragged the path so there was no visible gap. Here is a codepen example

enter code here

Upvotes: 1

Taylor Aull
Taylor Aull

Reputation: 21

https://graphicdesign.stackexchange.com/questions/53198/is-there-a-way-to-reverse-the-order-of-anchors-in-a-path

Optionally, you can do this in Illustrator (or other vector editor)

If your path is open:

  1. Select the pen tool (P)
  2. Click the last anchor of the path. The order will be reversed

If your path is closed:

  1. If the path is a compound path, skip to step 4
  2. Select the path with the Selection Tool (black arrow, V)
  3. Click on menu->object->compound path->make. The path will be turned into a "compound path"
  4. Open the Attributes window (menu->window->attributes)
  5. Use the "Reverse path direction" buttons (they are only available for compound paths).

Upvotes: 1

Paul LeBeau
Paul LeBeau

Reputation: 101918

The path starts where the definition says it does - which is whatever point the artist started from.

The general solution is to load the image into a vector editor and rearrange the path components - or redraw the path - so that it starts where you want.

If the path is simple enough, and you are familiar with how SVG path definitions work, you can do it by hand. As I have done below. Otherwise you will need to use a vector editor.

var $p = document.querySelector('svg path'),
    pLength = $p.getTotalLength();
// Clear any previous transition
$p.style.transition = $p.style.WebkitTransition =
  'none';
// Set up the starting positions
$p.style.strokeDasharray = pLength + ' ' + pLength;
$p.style.strokeDashoffset = -pLength;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
$p.getBoundingClientRect();
// Define our transition
$p.style.transition = $p.style.WebkitTransition =
  'stroke-dashoffset 2s ease-in-out';
// Go!
$('#draw').on('click', function(){
  $p.style.strokeDashoffset = '0';
  setTimeout(function(){
    $p.style.strokeDashoffset = -(pLength);
  }, 3000);
});
body {background:black;}
svg {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" height="223.5px" width="432.7px" viewBox="-1 -1 433.7 225.5">
  <path d="M 18, 223.5
           l 396.4,0
           C 461.3,162.7,410.9,85.8,341.6,95.3
           c 3.4 -62.2 -66.9 -96.3 -112.5 -62.7
           C 173.7 -34.9, 70.7, 10.7, 79.5, 94.4
           C 17.8, 93.4 -26.4, 166, 18, 223.5" stroke="#fff" stroke-width="2" fill="none" stroke-dasharray="" stroke-dashoffset="0.00"></path>
</svg>

<button id="draw">Draw!</button>

Upvotes: 1

Related Questions