Safari中的svg路径转换

Question

我想为svg文件格式的d路径设置动画。在Google Chrome和IE中可以正常运行，但在Safari中则不会显示动画

 -webkit-transition: 0.9s;

和

-webkit-transition-property: 0.9s;

不起作用。我该如何解决？

	function animationStart() {
	    let element = document.getElementById('graph'); 
  		element.setAttribute('d', 'M2,6 L5,3 L8,4 L11,4'); 
	}

		body {
		  display: flex;
		  flex-wrap: wrap;
		  justify-content: center;
		}
		svg {
		  width: 100%;
		  height: 100%;
		  background: #eee;
		  margin-bottom: 5%;
		}
		svg polyline,
		svg line,
		svg path {
		  fill: none;
		  stroke: red;
		  stroke-linecap: round;
		  stroke-linejoin: round;
		  transition: 0.9s;
		  -webkit-transition: 0.9s;
		  -webkit-transition-property: 0.9s;
		}

		.container {
		  width: 30%;
		  height: 30%;
		  text-align: center;
		}

<div class="container">

	<svg viewBox="0 0 10 10" class="svg-1">
	  <path stroke-width="0.1" d="M1,1 L3,3 L4,1 L5,2" id="graph"/>
	</svg>

	<button onclick="animationStart()">Click to draw</button>
</div>