Svg pattern confusion?

[lurtnowski]

I have this svg

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
	<defs>
		<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" />
		</pattern>
	</defs>
	<rect width="100%" height="100%" fill="url(#pattern_J61C8B)" />
</svg>

which looks good

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

[DaveMaxwell]

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…

[PaulOB]

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.
e.g.

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.

@DaveMaxwell

Because the overflow is hidden and the vertical alignment is middle,

That’s part of the bootstrap default min.css files so I doubt that will be the issue here. 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.

[m_hutley]

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…