New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to use Pattern #194

Closed
329379172 opened this Issue Nov 30, 2016 · 13 comments

Comments

Projects
None yet
9 participants
@329379172

329379172 commented Nov 30, 2016

No description provided.

@magicismight

This comment has been minimized.

Member

magicismight commented Dec 1, 2016

Pattern element is not supported yet

@mariotacke

This comment has been minimized.

mariotacke commented Mar 1, 2017

Any plans on supporting this?

@fendorio

This comment has been minimized.

fendorio commented Jun 7, 2017

Any plans for this? I'm trying to implement having a circle with an image background

@chrisheninger

This comment has been minimized.

chrisheninger commented Aug 30, 2017

I landed here looking to use Pattern– figured I'd share my solution for shapes w/ images w/o pattern.

import Svg, { ClipPath, Defs, Image, Polygon } from 'react-native-svg';

<Svg height="200" width="200" viewBox="0 0 300 300">
  <Defs>
    <ClipPath id="hexagon">
      <Polygon points="150,300 20,225 20,75 150,0 280,75 280,225" />
    </ClipPath>
  </Defs>

  <Image
    x="0"
    y="0"
    width="100%"
    height="100%"
    preserveAspectRatio="xMidYMid slice"
    xlinkHref={artwork.src} // my artwork.src is a data-uri… you can also require('./path/to/img.jpg') here too
    clipPath="url(#hexagon)"
  />
</Svg>

Swap out the shape inside of ClipPath with circle/square/etc!

@wcandillon

This comment has been minimized.

wcandillon commented Jan 3, 2018

Thanks @chrisheninger really appreciate your solution. It works very well!

@finnfiddle

This comment has been minimized.

finnfiddle commented Mar 11, 2018

Reviving an old thread here bit any plans on supporting this yet?

@msand

This comment has been minimized.

Collaborator

msand commented Mar 11, 2018

@finnfiddle I haven't looked into it at least, and haven't had any need for it. Honestly I didn't even know it existed or seen it in use anywhere yet. Would you be interested in working on it?

@finnfiddle

This comment has been minimized.

finnfiddle commented Mar 12, 2018

@msand pattern fills are really useful for datavis purposes. See some examples here. I would be happy to help but on the native side I don't have much clue what is going on :/ - maybe if you could give me some pointers about how to approach it I could have a crack though

@msand

This comment has been minimized.

Collaborator

msand commented Mar 13, 2018

I would recommend reading the spec for paint servers at the very least https://svgwg.org/svg2-draft/pservers.html and then look at how e.g. gradients and symbols have been implemented, there will be quite a lot of similarities. Essentially a new element will need to be defined, so a react component and the attribute handling in js, and a shadow node / view implementation in objective-c and java, and a bit of view manager logic to glue them together.

The Pattern specific part just needs the repetition of the pre defined pattern according to the language in the spec. That seems very straight forward at least, a double loop on the visible part of the canvas, and clipping using either the fill or stroke of the graphics element which references the pattern should suffice:

14.4. Patterns

A pattern is used to fill or stroke an object using a pre-defined graphic object which can be replicated ("tiled") at fixed intervals in x and y to cover the areas to be painted. Patterns are defined using a ‘pattern’ element and then referenced by properties fill and stroke on a given graphics element to indicate that the given element shall be filled or stroked with the pattern.

Attributes ‘x’, ‘y’, ‘width’, ‘height’ and ‘patternUnits’ define a reference rectangle somewhere on the infinite canvas. The reference rectangle has its top/left at (x, y) and its bottom/right at (x + width, y + height). The tiling theoretically extends a series of such rectangles to infinity in X and Y (positive and negative), with rectangles starting at (x + mwidth, y + n height) for each possible integer value for m and n.

https://svgwg.org/svg2-draft/pservers.html#Patterns

@msand

This comment has been minimized.

Collaborator

msand commented Mar 13, 2018

But yeah, the pattern element seems really useful, and I can probably help out more, just ask and I'll give clues or help with the boilerplate. I'll probably be shifting projects from working full time + building a company, to just building a company in the end of the month, and won't have any RN project as main focus for some time. So I'm not sure how it'll affect my contributions, the startup will be my main focus, but shifting from two jobs to one might give me more time for open source as well. Lets see how things go 😃

@questionablequestion

This comment has been minimized.

questionablequestion commented May 20, 2018

Any update on this?

@msand

This comment has been minimized.

Collaborator

msand commented Sep 2, 2018

@questionablequestion @finnfiddle I've implemented basic support for patterns here: fc63635
Any help in testing is much appreciated!

@msand

This comment has been minimized.

Collaborator

msand commented Dec 9, 2018

Closing this as Pattern is implemented now.

@msand msand closed this Dec 9, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment