Svg pattern confusion?

I have this svg

<svg xmlns="" width="100%" height="100%">
		<pattern id="pattern_J61C8B" patternUnits="userSpaceOnUse" width="24" height="24" patternTransform="rotate(46)">
			<line x1="0" y="0" x2="0" y2="24" stroke="#AEB6B2" stroke-width="30" />
	<rect width="100%" height="100%" fill="url(#pattern_J61C8B)" />

which looks good

But the pattern seems to dissapear on my bootstrap enabled page, can I diagnose the error?

Because the overflow is hidden and the vertical alignment is middle, I’m guessing it’s hidden behind the form elements (which probably have a 100% width as well…).

Highlight the markup in the developer tools, and it should highlight the element itself, even if it’s hidden behind something else…


It will be hard to diagnose without an example. I’m guessing its something on the tab routine you have or that draggable svg underneath it.

If I paste your svg into any bootstrap page it works as expected.

Is this just for a background or does it have some other purpose? If its a background then it should be a background svg instead (assuming you want content on top) or indeed a linear gradient would do the trick.

That’s part of the bootstrap default min.css files so I doubt that will be the issue here. :slight_smile: As you say it may be hidden behind something else or indeed the parent element may have a width and height of zero or any number of other things.

The parent element definitely has a play here… if you spot the box model in the second screenshot, the SVG is identifying itself as being 442x100, which… unless you’ve got a REALLY low resolution on your monitor…

1 Like