Skip to content
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
Closed

How to use Pattern #194

329379172 opened this issue Nov 30, 2016 · 13 comments

Comments

@329379172
Copy link

@329379172 329379172 commented Nov 30, 2016

No description provided.

@magicismight
Copy link
Collaborator

@magicismight magicismight commented Dec 1, 2016

Pattern element is not supported yet

@mariotacke
Copy link

@mariotacke mariotacke commented Mar 1, 2017

Any plans on supporting this?

@fendorio
Copy link

@fendorio fendorio commented Jun 7, 2017

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

@chrisheninger
Copy link

@chrisheninger 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
Copy link

@wcandillon wcandillon commented Jan 3, 2018

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

@finnfiddle
Copy link

@finnfiddle finnfiddle commented Mar 11, 2018

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

@msand
Copy link
Collaborator

@msand 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
Copy link

@finnfiddle 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
Copy link
Collaborator

@msand 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
Copy link
Collaborator

@msand 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
Copy link

@questionablequestion questionablequestion commented May 20, 2018

Any update on this?

@msand
Copy link
Collaborator

@msand msand commented Sep 2, 2018

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

@msand
Copy link
Collaborator

@msand 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
9 participants