CODEWITHSUNDEEP
react-nativesvgreact-native-svg
1110
1110

Reputation: 6839

How to center element inside SVG polygon

I have SVG that is assembled from multiple polygons. I am trying to put image/button inside polygon center but what ever I try it always put image in x=0 and y=0 of the screen.

<Svg width="546px" height="794px" viewBox="0 0 546 794" version="1.1" >
    <G id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <G id="item0" transform="translate(1.000000, 1.000000)" fill="#EDAF51" fill-rule="nonzero" stroke="#720D00">
            <Polygon id="RX-03" points="206.65269...">
            </Polygon>
            <Circle x="0" y="0" cx="40" cy="40" r="15" fill="black" />              
        </G>

With this I get:

enter image description here


But if I put <Circle x="110" y="0" I get

enter image description here

And this is correct but I don't want to use x=110 I am trying to make this circle to be relative to it's parent polygon. So I can set circle to x=0 y=0 and to keep it inside area of parent polygon.

Upvotes: 1

Views: 2072

Answers (2)

Alexandr_TT
Alexandr_TT

Reputation: 14585

New answer on the comment of the author of the question

In svg, with mutual positioning between elements, there is only absolute positioning.
Relative positioning in svg, as you want - there is no circle relative to the parent polygon. Only absolute positioning of a circle will help to place it in the right place You can create a circle once and clone it several times while positioning:

<use xlink:href="#crc1" x="100" y="150" /> 

<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="546px" height="794px" viewBox="0 0 546 794" >
  <defs>
    <circle id="crc1" cx="0" cy="0" r="15" stroke="red" />
</defs>	
	<image transform="translate(0, -300)" xlink:href="https://i.sstatic.net/q0PXl.png"
             width="100%" height="100%"
        />
		<use xlink:href="#crc1" x="100" y="150"  />
		  <use xlink:href="#crc1" x="210" y="110"  />
		    <use xlink:href="#crc1" x="300" y="190"  /> 
			  <use xlink:href="#crc1" x="385" y="190"  />
			    <use xlink:href="#crc1" x="500" y="190"  />
</svg>
</div>

Upvotes: 1

Alexandr_TT
Alexandr_TT

Reputation: 14585

An image can be inserted into any SVG shape in several ways:

  1. Using clipPath
  2. Using mask
  3. Using pattern

With any method of inserting an image, you need to focus on the shape of the template.

If the template has a symmetrical shape, it is necessary to select the original image with the same aspect ratio.

In other words, if the cropping pattern is a circle or regular polygons, then you need to select images with the same width and height.

I translated the React syntax into the regular SVG syntax. If necessary, you can go back

Selected round image badge

enter image description here

Insert this image into the hexagon`

1. Using clipPath

The hexagon acts as a cropping pattern.

<style>
.container {
width:50%;
height:50%;
}
</style>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 546 794"  >
  <defs>
    <clipPath id="clip">
     <path fill="none" stroke="none" stroke-width="2" d="m275.9 190.9 175.6 101.4 0 202.7-175.6 101.4-175.6-101.4 0-202.7z" />
    </clipPath> 
</defs>	
	<image xlink:href="https://i.sstatic.net/gOrJU.png"
       x="0"y="0"
       width="100%" height="100%"
       clip-path="url(#clip)" />
</svg>
</div>

2. Using mask

.container {
width:50%;
height:50%;
}
image {
 mask:url(#msk1);
 }
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 546 794" >
  <defs>
    <mask id="msk1">
     <path fill="white" stroke="red" stroke-width="12" d="m275.9 190.9 175.6 101.4 0 202.7-175.6 101.4-175.6-101.4 0-202.7z" />
    </mask> 
</defs>	
		<image xlink:href="https://i.sstatic.net/gOrJU.png" x="0" y="0" width="100%" height="100%" />
</svg>
</div>

3. Using pattern

.container {
width:50%;
height:50%;
}

path {
fill:url(#ptn1);
stroke:#DBC176;
stroke-width:8;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 546 794"  >
  <defs>
    <pattern id="ptn1" width="1" height="1">
      <image xlink:href="https://i.sstatic.net/gOrJU.png" x="-24" y="3" width="400px" height="400px"  /> 
    </pattern> 
</defs>	
	
	<path  d="m275.9 190.9 175.6 101.4 0 202.7-175.6 101.4-175.6-101.4 0-202.7z" />
</svg>
</div>

Upvotes: 1

Related Questions