Question

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>

绘图的方向很好，但我希望它从左下角开始，而不是右中间的随机点。你能告诉我如何解决它吗？

Answer 1

路径从定义所说的地方开始 - 这就是艺术家从哪里开始的。

一般的解决方案是将图像加载到矢量编辑器中并重新排列路径组件 - 或重绘路径 - 以便它从您想要的位置开始。

如果路径足够简单，并且您熟悉SVG路径定义的工作方式，则可以手动完成。正如我在下面所做的那样。否则你需要使用矢量编辑器。

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>

Answer 2

我遇到了这个问题，并在路径上做了一个小切口。我创建了3个新点并删除了中间点。然后我拖着路径，所以没有明显的差距。这是codepen example

enter code here

更改svg线图的起始坐标？

2 个答案: