Stack Overflow
Stack Overflow

Questions tagged [svg-pattern]

16 questions
3
votes
2 answers

Repeat SVG pattern horizontally on a larger container

I need to repeat an svg on a horizontal . I mean, the svg is larger that the pattern, so I need it to repeate horizontally on whatever space is left. I want the main pattern to appear in the center, which is exactly what is…
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
2
votes
1 answer

How to create a staggered square tiling pattern in svg?

I want to fill a rectangle space with a repeating image pattern. The images are arranged in a staggered square tiling. Two adjacent rows are staggered in the x-direction by half the width of the side of the square. How to use the pattern element in…
Tingying He
  • 137
  • 7
1
vote
1 answer

How do I flip every other repeat in a SVG pattern?

I want to make a SVG pattern where every other horizontal repeat is mirrored compared to the original. How would I do that, is there subpatterns or a pattern element that can be used? This is the code I've tried with so far.
Joakim Vretlund
  • 13
  • 2
1
vote
1 answer

Fill SVG path element with a background-image and full width

Can someone help me with this: I was able to add SVG with filled image but the aspect ratio/scaling doesn't work as expected. I tried a few solutions but neither of them worked. Please help. The link is below: https://park-maksimir.hr/testnasve/
giga_games
  • 11
  • 2
1
vote
1 answer

Pattern no longer working when moving SVG to an external file

Here's an SVG. If you add this directly to your HTML page, it will render nicely. Note that the folder's right-hand side has a subtle shadow that's done with a black and white checker pattern.
digory doo
  • 1,978
  • 2
  • 23
  • 37
1
vote
1 answer

How to center an svg inside a larger responsive container at all possible widths?

I have a responsive SVG container and I need my to appear centered on every situation. I mean: The triangle should be centered at all possible widths And the space on left/right must repeat the triangle Is this…
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
0
votes
0 answers

Assign unique id to each repeated instance of in SVG

I want to fill some charts created with d3.js with custom patterns, and after the filling is complete, I want to allow users to edit each individual repeated instance in the pattern fill as needed. I believe this requires obtaining the ID of each…
Tingying He
  • 137
  • 7
0
votes
1 answer

Reusing symbol in SVG pattern without blurring

I found that symbol reused in pattern looks blurry.
mezich
  • 1
  • 1
0
votes
0 answers

Error rendering an svg image when referencing a pattern using flutter_svg

Flutter 3.0.5 || Dart 2.17.6 || flutter_svg: 1.1.5 I am trying to add an svg image to the screen which is works fine in browsers but when adding the svg using flutter_svg package as string or asset it gives an error: ======== Exception caught by SVG…
Rami Som
  • 1
  • 2
0
votes
1 answer

SVG pattern size relative to container shape

I am trying to create a svg pattern where size of it is relative to shape to which is applied. Pattern should consist of rect with linearGradient and text elements which repeats in x-axis n-times or every n pixels and is vertically aligned in middle…
user5717579
0
votes
1 answer

SVG: generate increasing numbers on grid

So basicly I have a grid that is using parrerns of paths/rects to draw the grid. On this grid I want to put numbers in x & y direction. Like a coordinate system you might know from school. I tried putting text in the patterns but there are two…
PhilipAllStar
  • 120
  • 1
  • 9
0
votes
1 answer

Save images to PDF - images within SVG elements are blurry, whereas images in are sharp

See reproduced example here - https://codepen.io/canovice/pen/eYRmYKR - command + P to print, I've taken this screenshot of the print/pdf output: Problem: On web, both images are sharp. On print and save to PDF, the logo in the tag remains…
Canovice
  • 9,012
  • 22
  • 93
  • 211
0
votes
0 answers

how to use image as background in svg of guitar pick shape

I want fit image under guitar pick shaped svg element …
Vicky Sharma
  • 1
  • 1
0
votes
1 answer

Apply a gradient to a svg shape filled with a path

I have a svg rectangle filled with a diagonal pattern and I want to apply a gradient on it. So the gradient should span the complete rectangle with the pattern and shouldn't be applied to each pattern item. This is my code: import * as React from…
whitecircle
  • 237
  • 9
  • 34
0
votes
1 answer

SVG Pattern doesn't change fill color

I am using Vue.js and I'm creating SVGs that use shape patterns as background. The patterns are working fine, but whenever I try to change the color of the pattern filling dynamically by passing props, it doesn't work. I am sure that the prop that I…
Beasteca
  • 83
  • 9
1
2