React Native’de SVG Clipping Nasıl Yapılır?

React Native uygulamaları geliştirirken üstteki gibi ülke sınırları içerisinde bayrak çizdirmek istiyorsanız öncelikle react-native-svg kütüphanesini yüklemeniz gerekiyor:

yarn add react-native-svg

Devamında ülke sınırları için SVG dosyasını ve bayrak görseli için de PNG/JPG dosyasına ihtiyacınız var. Bunun için GitHub’da iki repo’ya rastladım:

• Harita SVG’leri: https://github.com/djaiss/mapsicon
• Ülke bayrakları: https://github.com/hjnilsson/country-flags

Not: Harita SVG’lerinde bazen problem olabiliyor (Haritanın ters dönmüş olması gibi). Illustrator ile dosyayı açıp <g> etiketlerini silip kaydettiğinizde problem giderilecektir.

SVG dosyasındaki <path> kısmını alalım ve <Defs><ClipPath> içerisine yerleştirelim:

<Svg>
  <Defs>
    <ClipPath id="clip">
      <Path fill="#000" d="M77.014,2.755c-3..." />
    </ClipPath>
  </Defs>
</Svg>

<ClipPath> etiketi için verdiğimiz id özelliğini daha sonra Image için aşağıdaki gibi kullanabiliriz:

<Svg width="1400" height="600">
  <Defs>
    <ClipPath id="clip">
      <Path
        fill="#000000"
        d="M77.014,2.7...."
      />
    </ClipPath>
  </Defs>
  <G x="0" y="0" scale="0.3" clipPath="url(#clip)">
    <Image
      width="100%"
      height="100%"
      preserveAspectRatio="xMidYMid slice"
      opacity="1"
      href={require('./tr.png')}
    />
  </G>
</Svg>

<Image> etiketini <G> ile sarmalayarak kesilen alan üzerinde değişiklikler yapabilirsiniz. Bayrak boyutu çok büyük olduğu için küçültmek amacıyla scale özelliğinden yararlandım. clipPath kısmında ise url ile birlikte belirlediğimiz clip id’sini vermiş olduk. preserveAspectRatio özelliği, bayrak görselinin boyutlandırılması için kullanılır. Daha fazla bilgi için cssTricks sitesini ziyaret edebilirsiniz.

Dosyanın son hali aşağıdaki gibi olacaktır:

Sonuç olarak

SVG’deki clipPath özelliğini kullanarak uygulama arayüzünü daha zengin hale getirebilirsiniz. Dikkat etmeniz gereken konulardan biri ise ClipPath kısmına verdiğiniz Path etiketindeki d özelliği ne kadar büyük olursa uygulamanın SVG’yi render etmesi o kadar uzayacaktır. Cihazda testlerinizi yaparak canlı ortama atmanızı tavsiye ederim. SVG ile ilgili detaylı bilgiyi bu yazımdan edinebilirsiniz.

Bu yazım hakkında soru ve görüşlerinizi aşağıdaki yorumlar kısmından yazabilirsiniz. Bana destek vermek için alkış simgesine tıklayabilirsiniz. Sonraki yazımda görüşmek üzere…