Drawing on a specific SVG component that is not rectangular? Does anyone have code for that?

[faisalaltell12]

Description

Here is the example for drawing on a standard rectangular view:

I would like to draw on a custom Svg component.

[wcandillon]

Could you explain in details what you are trying to achieve?

[faisalaltell12]

For sure William, thank you so much for your response.

Take this view for example, shown below. I would like to draw on it:

import * as React from "react"
import Svg, { SvgProps, Path } from "react-native-svg"
/* SVGR has dropped some elements not supported by react-native-svg: title */
const SvgComponent = (props) => (
  <Svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 507.15 619.14"
    {...props}
  >
    <Path
      d="M169 23.26A64.79 64.79 0 0 1 186 37a39.9 39.9 0 0 1 9 17 4.35 4.35 0 0 1-.43 3.21l-.24.42q-13.08-.06-26.93-.07a143.52 143.52 0 0 0-53.4 9.85q-25.28 10-37.64 27a190.84 190.84 0 0 0 25.06 25.14q3.18 2.66 13 10.54 4.47 3.56 9.5 7.51 26.48-14.52 58.88-30.68Q227 84.81 245.2 78.6a4.55 4.55 0 0 1 1.5-.26h.85a4.52 4.52 0 0 1 3.3 1.38 4.46 4.46 0 0 1 1.34 3.28v6.11a6.81 6.81 0 0 1-.05.78q-.88 5.25-3.08 16.26-1.87 9.48-2.93 16.32-.3 2.1-3.25 17.52-1.95 10.08-2.56 13.51a4.6 4.6 0 0 1-.92 2 5 5 0 0 1-1.77 1.4 283.89 283.89 0 0 0-69.87 44.18 420.51 420.51 0 0 0-66.57 72.28 193.16 193.16 0 0 0-35.73 89q-6.73 50.15 22.71 91a167.61 167.61 0 0 0 18.94 22.11c.91.86 1.83 1.72 2.78 2.57a168.84 168.84 0 0 0 90.11 40.1q7.78 1.1 15.7 1.44 14.41 1.78 29 2.73 38.5 2.69 77 2.31 37.57-.35 75.19-2.65l74.56-4.15q6.17-.35 12.35-.67h.69a4.65 4.65 0 0 1 4 7.53 166.8 166.8 0 0 1-60.57 47.63 344.45 344.45 0 0 1-80 26 518.48 518.48 0 0 1-85 9.41 308.52 308.52 0 0 1-84.66-9.46 295.93 295.93 0 0 1-76.83-31.46l-.14-.11-1.47-.94A112.58 112.58 0 0 1 50.28 507c-.3-.8-.59-1.58-.89-2.36-.52-1.19-1-2.34-1.45-3.44a173.67 173.67 0 0 1-6.5-19.2v-.09q-.21-.83-4.85-19.06a273.16 273.16 0 0 1-7-41.91q-1.71-18.31-1.7-41.84 0-36.94 17.87-92Q52.86 264.86 62 243q7.08-17 14-30.49a137.75 137.75 0 0 1-13.11-11.78 246.54 246.54 0 0 1-20.3-22.95 173.69 173.69 0 0 1-17.39-26.32q-7.82-14.91-7.69-25-.17-13.36 11.1-36.9 10.46-21.9 22.66-36.22 15.31-18 32.24-28.61Q105 11.27 126.63 11.32a79.23 79.23 0 0 1 21.51 3.14 89.56 89.56 0 0 1 20.86 8.8ZM100.15 554.7a2.43 2.43 0 0 0 .28.2q2.92 2 5.95 4a286.83 286.83 0 0 0 74.25 30.38 299.23 299.23 0 0 0 82.14 9.17 505.78 505.78 0 0 0 83.51-9.22 335.54 335.54 0 0 0 77.85-25.3 158 158 0 0 0 49.14-35.66l1.2-1.33-2.44.14q-37.21 2.08-74.55 4.14-37.83 2.32-75.66 2.7-38.91.38-77.76-2.34-14.25-.93-28.36-2.64-53.09-1.48-95.95-30.82a106.48 106.48 0 0 1-9.88-7.69q-3.19-2.69-6.24-5.47v-.06c-1-.91-2-1.84-3-2.78a177.35 177.35 0 0 1-20-23.35q-31.57-43.84-24.36-97.66a202.49 202.49 0 0 1 37.39-93.21 431.67 431.67 0 0 1 68.05-73.9 292.45 292.45 0 0 1 69.92-44.62c.48-2.56 1.18-6.3 2.13-11.21q2.94-15.3 3.17-17.06a.08.08 0 0 1 0-.07q1-7 3-16.74t2.85-15q-18.44 7.14-55.9 25.86-33.87 16.88-61.23 32a4.68 4.68 0 0 1-2.62.57 4.58 4.58 0 0 1-2.5-1q-6.4-5-12-9.46-9.92-8-13.14-10.69A195.34 195.34 0 0 1 66.58 97.1a4.47 4.47 0 0 1-.92-3.42 4.54 4.54 0 0 1 1.79-3.1 2.66 2.66 0 0 1 .51-.34 1.71 1.71 0 0 1 .21-.35q13.67-19.73 42.39-31.11a153 153 0 0 1 56.89-10.5q9.27 0 12.45.21c1.07.07 2.1.15 3.1.25a36.25 36.25 0 0 0-4-5.69 56.48 56.48 0 0 0-14.61-11.76 78.41 78.41 0 0 0-18.71-7.88 70.92 70.92 0 0 0-19-2.81q-19.12.07-38.21 12-15.83 9.92-30.13 26.75Q46.85 72.9 37 93.57q-10.05 21-10.2 32.9.12 8.31 6.63 20.71A166.09 166.09 0 0 0 49.87 172a243.18 243.18 0 0 0 19.54 22.09Q75 199.67 87 211.32a5 5 0 0 1-.73 2.36 5.58 5.58 0 0 1-1 1.17Q78 228.7 70.6 246.54q-9 21.53-16.09 43.35-17.37 53.38-17.41 89.16 0 23 1.65 41a259.41 259.41 0 0 0 6.8 40.46q4.44 17.53 4.82 19a.14.14 0 0 1 0 .09 156.76 156.76 0 0 0 6.13 18.1q1.32 3.26 3.08 7a101.67 101.67 0 0 0 37.52 48Z"
      style={{
        fillOpacity: 0.99,
        fillRule: "evenodd",
      }}
    />
    <Path
      d="M424.15 563.92a335.54 335.54 0 0 1-77.85 25.3 505.78 505.78 0 0 1-83.51 9.22 299.23 299.23 0 0 1-82.14-9.17 286.83 286.83 0 0 1-74.25-30.38l-6.23-4.17-3-2a101.67 101.67 0 0 1-37.52-48q-1.76-3.72-3.08-7a156.76 156.76 0 0 1-6.13-18.1.14.14 0 0 0 0-.09l-4.82-19A259.41 259.41 0 0 1 38.75 420q-1.65-18-1.65-41 0-35.79 17.41-89.14 7.08-21.84 16.09-43.35 7.4-17.8 14.58-31.66a5.58 5.58 0 0 0 1-1.17 5 5 0 0 0 .73-2.36q-12-11.65-17.54-17.2A243.18 243.18 0 0 1 49.87 172a166.09 166.09 0 0 1-16.45-24.85q-6.51-12.41-6.63-20.71.15-11.85 10.2-32.9 9.86-20.64 21.35-34.19 14.3-16.83 30.08-26.75 19.08-11.93 38.21-12a70.92 70.92 0 0 1 19 2.81 78.41 78.41 0 0 1 18.71 7.88A56.48 56.48 0 0 1 179 43.05a36.25 36.25 0 0 1 4 5.69c-1-.1-2-.18-3.1-.25q-3.18-.21-12.45-.21a153 153 0 0 0-56.89 10.5Q81.83 70.17 68.17 89.89a1.71 1.71 0 0 0-.21.35 2.66 2.66 0 0 0-.51.34 4.54 4.54 0 0 0-1.79 3.1 4.47 4.47 0 0 0 .92 3.42 195.34 195.34 0 0 0 28.86 29.55q3.21 2.7 13.14 10.69 5.57 4.44 12 9.46a4.58 4.58 0 0 0 2.5 1 4.68 4.68 0 0 0 2.62-.57q27.36-15.09 61.23-32 37.46-18.72 55.9-25.86-.9 5.15-2.85 15t-3 16.74a.08.08 0 0 0 0 .07q-.23 1.77-3.17 17.06c-1 4.91-1.65 8.65-2.13 11.21A292.45 292.45 0 0 0 161.72 194a431.67 431.67 0 0 0-68.06 73.9 202.49 202.49 0 0 0-37.39 93.22q-7.22 53.82 24.36 97.66a177.35 177.35 0 0 0 20 23.35c1 .94 2 1.87 3 2.78v.06q3 2.79 6.24 5.47a106.48 106.48 0 0 0 9.88 7.69q42.87 29.32 96 30.82 14.12 1.73 28.36 2.64 38.85 2.71 77.76 2.34 37.83-.37 75.66-2.7 37.34-2 74.55-4.14l.76.74.46.45a158 158 0 0 1-49.15 35.64Z"
      style={{
        fill: "#fff",
        fillOpacity: 0.99,
        fillRule: "evenodd",
      }}
    />
    <Path
      d="m473.29 528.26-.46-.44.48.44h-.02z"
      style={{
        fill: "#269c48",
        fillOpacity: 0.99,
        fillRule: "evenodd",
      }}
    />
  </Svg>
)
export default SvgComponent

This view above is the image shown below circled in blue:

I would like to allow just drawing on this view itself, and not anywhere else on the screen. Here is the code I have so far:

             <SvgComponent
             //width={100}
             //height={100}
              onLayout={onLayout}
              style={{zIndex: 7, elevation: 7}}
             >

            
                   <SkiaView
                    style={{
                    //height: 1000,// canvasHeight,
                    //width: 1000,// canvasWidth,
                    position: "relative",
                    zIndex: 20,
                  }}
                  onDraw={onDraw}
                  />

                <Canvas
                  style={{
                    height:1000,// canvasHeight,
                    width:1000,// canvasWidth,
                    position: "absolute",
                  }}
                >
                  {paths?.map((path, index) => (
                    <Path
                      key={index}
                      path={path}
                      color={colorString}
                      strokeWidth={20}
                      //paint={path.paint}
                      style="stroke"
                    />
                  ))}
                </Canvas>
              </SvgComponent>

I am not sure if there are style parameters I can apply to SkiaView or Canvas to achieve what I am trying to do?

When it was a standard react native View, I used on layout and set the canvas width and height easily.

[wcandillon]

I think you might be looking for clip paths or masks: https://shopify.github.io/react-native-skia/docs/group/#clip-path https://shopify.github.io/react-native-skia/docs/mask/

…

On Fri, Sep 15, 2023 at 6:09 PM faisalaltell12 ***@***.***> wrote: For sure William, thank you so much for your response. Take this view for example, shown below. I would like to draw on it: import * as React from "react" import Svg, { SvgProps, Path } from "react-native-svg" /* SVGR has dropped some elements not supported by react-native-svg: title */ const SvgComponent = (props) => ( <Svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 507.15 619.14" {...props} > <Path d="M169 23.26A64.79 64.79 0 0 1 186 37a39.9 39.9 0 0 1 9 17 4.35 4.35 0 0 1-.43 3.21l-.24.42q-13.08-.06-26.93-.07a143.52 143.52 0 0 0-53.4 9.85q-25.28 10-37.64 27a190.84 190.84 0 0 0 25.06 25.14q3.18 2.66 13 10.54 4.47 3.56 9.5 7.51 26.48-14.52 58.88-30.68Q227 84.81 245.2 78.6a4.55 4.55 0 0 1 1.5-.26h.85a4.52 4.52 0 0 1 3.3 1.38 4.46 4.46 0 0 1 1.34 3.28v6.11a6.81 6.81 0 0 1-.05.78q-.88 5.25-3.08 16.26-1.87 9.48-2.93 16.32-.3 2.1-3.25 17.52-1.95 10.08-2.56 13.51a4.6 4.6 0 0 1-.92 2 5 5 0 0 1-1.77 1.4 283.89 283.89 0 0 0-69.87 44.18 420.51 420.51 0 0 0-66.57 72.28 193.16 193.16 0 0 0-35.73 89q-6.73 50.15 22.71 91a167.61 167.61 0 0 0 18.94 22.11c.91.86 1.83 1.72 2.78 2.57a168.84 168.84 0 0 0 90.11 40.1q7.78 1.1 15.7 1.44 14.41 1.78 29 2.73 38.5 2.69 77 2.31 37.57-.35 75.19-2.65l74.56-4.15q6.17-.35 12.35-.67h.69a4.65 4.65 0 0 1 4 7.53 166.8 166.8 0 0 1-60.57 47.63 344.45 344.45 0 0 1-80 26 518.48 518.48 0 0 1-85 9.41 308.52 308.52 0 0 1-84.66-9.46 295.93 295.93 0 0 1-76.83-31.46l-.14-.11-1.47-.94A112.58 112.58 0 0 1 50.28 507c-.3-.8-.59-1.58-.89-2.36-.52-1.19-1-2.34-1.45-3.44a173.67 173.67 0 0 1-6.5-19.2v-.09q-.21-.83-4.85-19.06a273.16 273.16 0 0 1-7-41.91q-1.71-18.31-1.7-41.84 0-36.94 17.87-92Q52.86 264.86 62 243q7.08-17 14-30.49a137.75 137.75 0 0 1-13.11-11.78 246.54 246.54 0 0 1-20.3-22.95 173.69 173.69 0 0 1-17.39-26.32q-7.82-14.91-7.69-25-.17-13.36 11.1-36.9 10.46-21.9 22.66-36.22 15.31-18 32.24-28.61Q105 11.27 126.63 11.32a79.23 79.23 0 0 1 21.51 3.14 89.56 89.56 0 0 1 20.86 8.8ZM100.15 554.7a2.43 2.43 0 0 0 .28.2q2.92 2 5.95 4a286.83 286.83 0 0 0 74.25 30.38 299.23 299.23 0 0 0 82.14 9.17 505.78 505.78 0 0 0 83.51-9.22 335.54 335.54 0 0 0 77.85-25.3 158 158 0 0 0 49.14-35.66l1.2-1.33-2.44.14q-37.21 2.08-74.55 4.14-37.83 2.32-75.66 2.7-38.91.38-77.76-2.34-14.25-.93-28.36-2.64-53.09-1.48-95.95-30.82a106.48 106.48 0 0 1-9.88-7.69q-3.19-2.69-6.24-5.47v-.06c-1-.91-2-1.84-3-2.78a177.35 177.35 0 0 1-20-23.35q-31.57-43.84-24.36-97.66a202.49 202.49 0 0 1 37.39-93.21 431.67 431.67 0 0 1 68.05-73.9 292.45 292.45 0 0 1 69.92-44.62c.48-2.56 1.18-6.3 2.13-11.21q2.94-15.3 3.17-17.06a.08.08 0 0 1 0-.07q1-7 3-16.74t2.85-15q-18.44 7.14-55.9 25.86-33.87 16.88-61.23 32a4.68 4.68 0 0 1-2.62.57 4.58 4.58 0 0 1-2.5-1q-6.4-5-12-9.46-9.92-8-13.14-10.69A195.34 195.34 0 0 1 66.58 97.1a4.47 4.47 0 0 1-.92-3.42 4.54 4.54 0 0 1 1.79-3.1 2.66 2.66 0 0 1 .51-.34 1.71 1.71 0 0 1 .21-.35q13.67-19.73 42.39-31.11a153 153 0 0 1 56.89-10.5q9.27 0 12.45.21c1.07.07 2.1.15 3.1.25a36.25 36.25 0 0 0-4-5.69 56.48 56.48 0 0 0-14.61-11.76 78.41 78.41 0 0 0-18.71-7.88 70.92 70.92 0 0 0-19-2.81q-19.12.07-38.21 12-15.83 9.92-30.13 26.75Q46.85 72.9 37 93.57q-10.05 21-10.2 32.9.12 8.31 6.63 20.71A166.09 166.09 0 0 0 49.87 172a243.18 243.18 0 0 0 19.54 22.09Q75 199.67 87 211.32a5 5 0 0 1-.73 2.36 5.58 5.58 0 0 1-1 1.17Q78 228.7 70.6 246.54q-9 21.53-16.09 43.35-17.37 53.38-17.41 89.16 0 23 1.65 41a259.41 259.41 0 0 0 6.8 40.46q4.44 17.53 4.82 19a.14.14 0 0 1 0 .09 156.76 156.76 0 0 0 6.13 18.1q1.32 3.26 3.08 7a101.67 101.67 0 0 0 37.52 48Z" style={{ fillOpacity: 0.99, fillRule: "evenodd", }} /> <Path d="M424.15 563.92a335.54 335.54 0 0 1-77.85 25.3 505.78 505.78 0 0 1-83.51 9.22 299.23 299.23 0 0 1-82.14-9.17 286.83 286.83 0 0 1-74.25-30.38l-6.23-4.17-3-2a101.67 101.67 0 0 1-37.52-48q-1.76-3.72-3.08-7a156.76 156.76 0 0 1-6.13-18.1.14.14 0 0 0 0-.09l-4.82-19A259.41 259.41 0 0 1 38.75 420q-1.65-18-1.65-41 0-35.79 17.41-89.14 7.08-21.84 16.09-43.35 7.4-17.8 14.58-31.66a5.58 5.58 0 0 0 1-1.17 5 5 0 0 0 .73-2.36q-12-11.65-17.54-17.2A243.18 243.18 0 0 1 49.87 172a166.09 166.09 0 0 1-16.45-24.85q-6.51-12.41-6.63-20.71.15-11.85 10.2-32.9 9.86-20.64 21.35-34.19 14.3-16.83 30.08-26.75 19.08-11.93 38.21-12a70.92 70.92 0 0 1 19 2.81 78.41 78.41 0 0 1 18.71 7.88A56.48 56.48 0 0 1 179 43.05a36.25 36.25 0 0 1 4 5.69c-1-.1-2-.18-3.1-.25q-3.18-.21-12.45-.21a153 153 0 0 0-56.89 10.5Q81.83 70.17 68.17 89.89a1.71 1.71 0 0 0-.21.35 2.66 2.66 0 0 0-.51.34 4.54 4.54 0 0 0-1.79 3.1 4.47 4.47 0 0 0 .92 3.42 195.34 195.34 0 0 0 28.86 29.55q3.21 2.7 13.14 10.69 5.57 4.44 12 9.46a4.58 4.58 0 0 0 2.5 1 4.68 4.68 0 0 0 2.62-.57q27.36-15.09 61.23-32 37.46-18.72 55.9-25.86-.9 5.15-2.85 15t-3 16.74a.08.08 0 0 0 0 .07q-.23 1.77-3.17 17.06c-1 4.91-1.65 8.65-2.13 11.21A292.45 292.45 0 0 0 161.72 194a431.67 431.67 0 0 0-68.06 73.9 202.49 202.49 0 0 0-37.39 93.22q-7.22 53.82 24.36 97.66a177.35 177.35 0 0 0 20 23.35c1 .94 2 1.87 3 2.78v.06q3 2.79 6.24 5.47a106.48 106.48 0 0 0 9.88 7.69q42.87 29.32 96 30.82 14.12 1.73 28.36 2.64 38.85 2.71 77.76 2.34 37.83-.37 75.66-2.7 37.34-2 74.55-4.14l.76.74.46.45a158 158 0 0 1-49.15 35.64Z" style={{ fill: "#fff", fillOpacity: 0.99, fillRule: "evenodd", }} /> <Path d="m473.29 528.26-.46-.44.48.44h-.02z" style={{ fill: "#269c48", fillOpacity: 0.99, fillRule: "evenodd", }} /> </Svg> ) export default SvgComponent This view above is the image shown below circled in blue: [image: image] <https://user-images.githubusercontent.com/89555130/268335719-aa6a4389-49d6-4c20-aee0-9962cb6e1923.png> I would like to allow just drawing on this view itself, and not anywhere else on the screen. Here is the code I have so far: <SvgComponent //width={100} //height={100} onLayout={onLayout} style={{zIndex: 7, elevation: 7}} > <SkiaView style={{ //height: 1000,// canvasHeight, //width: 1000,// canvasWidth, position: "relative", zIndex: 20, }} onDraw={onDraw} /> <Canvas style={{ height:1000,// canvasHeight, width:1000,// canvasWidth, position: "absolute", }} > {paths?.map((path, index) => ( <Path key={index} path={path} color={colorString} strokeWidth={20} //paint={path.paint} style="stroke" /> ))} </Canvas> </SvgComponent> I am not sure if there are style parameters I can apply to SkiaView or Canvas to achieve what I am trying to do? — Reply to this email directly, view it on GitHub <#1837 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACKXVQVKO53O7HWHAZQW5DX2R4SFANCNFSM6AAAAAA42A4QPY> . You are receiving this because you commented.Message ID: ***@***.*** com>

[faisalaltell12]

Basically have a SkiaView and Canvas as child components under this? I am not sure if that will work..

<Group clip={star}>
        //add Skia view and canvas here
</Group>

[faisalaltell12]

I am trying to have a user draw on the screen by touch.

[msriaz]

@faisalaltell12 were you able to find a solution?