It also means that, whatever you set, the aspect ratio of the tile has a fixed relation to the aspect ratio of the referencing element, not the contained image. and 100% for both result in the tile having the same size as the rect. In SVG, the pattern is the parent of the image, and the size of the tiles is set independently from that of the image.Ī second complication comes from the fact that width and height in percentages are in relation to the width and height of the referencing. CSS can tile the image along its inherent size because the image itself is its subject. You can only achieve what you want if you explicitely enter the size of your background image. The complete svg used for generating the first image The second result is what we want to achieve throughout. Without the positioning, everything works perfect.Ĭonsidering the above, I think the problem is with the pattern image x,y offset (I guess) and the width/height also.īelow is the output of both svg and css version of the background.Raw background position is x:-134px and y:-2px but converted to percentage as -67% and -1% respectively.Now when we want to render actual image,we take the basic information to generate an actual svg which is then converted to flat image using imagemagick library.Įverything works perfect except the part where the css background styles is implemented using svg pattern.īelow is the css code background-repeat: repeat īelow is the sample of the generated svg On the editor, we use css styling to preview live changes. ![]() The svg comes from compiling some information captured from the editor we built. I am using Imagemagick to generate images from pre-computed svg.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |