iOS Safari: SVG Elementlerinde Manipülasyona İzin Vermiyor

En son yazdığım 2 yazı iOS Safari üzerinde çalışırken karşılaştığım sorunlar ile alakadardı. Bu yazı da aynı şekilde iOS Safari'nin bir diğer saçmalığı konusunda not düşmemden ibaret.

Yeni karşılaştığım sorun, SVG elementi ve SVG elementi içerisindeki elementlerin Javascript ile manipüle edilemiyor oluşu. iOS Safari, sayfa yüklenmesi tamamlandığında, sayfadaki SVG elementini olduğu gibi çizdikten sonra, bu element üzerinde örneğin;

<svg>
  <line id="cizgim"></line>
</svg>
<script>
  let line = document.querySelector('cizgim');
  line.setAttribute("xxx", "yyyy");
</script>

Benzeri kod, Safari sayfa yüklenmesi tamamlandığında elementin çizimi tamamlandığından dolayı iOS Safaride çalışmayacaktır.

Bu durumu, plain Javascript ile fark etmişken, ayrıca ReactJS'de şöyle bir durumda da fark ettim.

render(){
  return(<svg>
     <text>
      {this.prop.yazi}
     </text>
   </svg>);
};

Unmount edilip tekrar mount edilmeyen, onun yerine sadece yeni prop receive eden bir component için, SVG elementi yine tekrar draw edilmemekte.

Yorumları Göster veya Yeni Yorum Yaz