CODEWITHSUNDEEP
google-chromesvg
brenjt
brenjt

Reputation: 16297

SVG Pattern disappears on transform

I am having an issue where my SVG patterns are disappearing when I transform in Chrome. I cannot seem to figure out a work around.

What would be causing the pattern to be disappearing when I use transform: scale, or rotate in Chrome

<svg id="definitions" width="300" height="110" xmlns="http://www.w3.org/2000/svg" version="1.1" style="background:#ddd">
    <defs>
        <pattern id="crosshatch" width="10" height="10" patternUnits="userSpaceOnUse"><rect width="10" height="10" fill="#FFF"></rect><path vector-effect="non-scaling-stroke" d="M-1,1 l2,-2 M0, 10 l10,-10 M9, 11 l2,-2" stroke-opacity="0.2" stroke="#000" stroke-width="1"></path></pattern>
    </defs>
    <path stroke="#900" transform="translate(10, 10)" d="M0,0L66,0L66,84L48,90L18,90L0,84L0,0" class="cement" fill="url(#crosshatch)"></path>
    <path stroke="#900" transform="translate(160, 100) rotate(180)" d="M0,0L66,0L66,84L48,90L18,90L0,84L0,0" class="cement" fill="url(#crosshatch)"></path>
</svg>

I am wondering if it just might be a bug in Chrome.

Upvotes: 0

Views: 1682

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

This is a known bug in Chrome.

https://code.google.com/p/chromium/issues/detail?id=447707

Looks like it will be fixed in Chrome 41.

Upvotes: 1

Related Questions