CODEWITHSUNDEEP
svgsvg-pattern
user5717579
user5717579

Reputation:

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 of rect. The results should look like this. Result I want

I have tried following approaches.

<svg width="100%" height="100">
    <defs>
        <linearGradient id="gradient" x1="0%" x2="0%" y1="0%" y2="100%">
            <stop offset="0%" stop-color="#fff" />
            <stop offset="100%" stop-color="#c6c6c6" />
        </linearGradient>
        <pattern id="pattern" width="25%" height="100%">
            <rect width="100%" height="100%" fill="url(#gradient)"></rect>
            <text x="10" y="50%" dx=50 fill="red">test</text>
        </pattern>
    </defs>
    <rect width="1000" height="100" fill="url(#pattern)"></rect>
</svg>

This approach gives the result I want but the size of pattern is not relatve to shape to which is applied and fails when shape is resized, to solve this issue I have tried to create a pattern with patternContentUnits="objectBoundingBox" but then I am having problems positioning the text.

<svg width="100%" height="100%">
    <defs>
        <linearGradient id="gradient" x1="0%" x2="0%" y1="0%" y2="100%">
            <stop offset="0%" stop-color="#fff" />
            <stop offset="100%" stop-color="#c6c6c6" />
        </linearGradient>
        <pattern id="pattern" patternContentUnits="objectBoundingBox" width="25%" height="100%">
            <rect width="1" height="1" fill="url(#gradient)"></rect>
            <text x="0.1" y="0.5">test</text>
        </pattern>
    </defs>
    <rect width="1000" height="100" fill="url(#pattern)"></rect>
</svg>

Upvotes: 0

Views: 198

Answers (1)

Robert Longson
Robert Longson

Reputation: 124219

objectBoundingBox units are in the range [0, 1] so 10 is too big.

You'll need to use a suitable font-size too.

<svg width="100%" height="100%">
    <defs>
        <linearGradient id="gradient" x1="0%" x2="0%" y1="0%" y2="100%">
            <stop offset="0%" stop-color="#fff" />
            <stop offset="100%" stop-color="#c6c6c6" />
        </linearGradient>
        <pattern id="pattern" patternContentUnits="objectBoundingBox" width="25%" height="100%">
            <rect width="1" height="1" fill="url(#gradient)"></rect>
            <text transform="scale(0.2, 1)" x="0.1" y="0.5" font-size="0.1">test</text>
        </pattern>
    </defs>
    <rect width="1000" height="100" fill="url(#pattern)"></rect>
</svg>

Upvotes: 1

Related Questions