0

On my HTML page I have to render a shadowed and rotated polygon containing an image. If I assign the shadow to the DIV, I get a pixelated border and a blurry image.

<div style="-webkit-transform:rotate(-15deg); -webkit-filter:drop-shadow(2px 2px 1.2px rgba(26, 25, 24, 0.50)); -webkit-transform:rotate(-30deg);">
   <svg>

If I add "transform:translateZ(0);" to the SVG, I get a good border, a good shadow and a blurry image.

<div style="-webkit-transform:rotate(-30deg); -webkit-filter:drop-shadow(0.73px 2.73px 1.2px rgba(26, 25, 24, 0.50));">
   <svg style="-webkit-transform:translate3D(0,0,0);">

At the end I found the best way is to assign an -webkit-svg-shadow to the SVG. This gives a good shadow, a good border and a net image. Cool.

<div style="left:58.99px ; top:90.18px; width:146.5px; height:146.5px; -webkit-transform:rotate(-30deg);">
    <svg width="146.5px" height="146.5px" style="-webkit-svg-shadow:2px 2px 1.2px rgba(26, 25, 24, 0.50); ">
        <defs>
            <clipPath id="clipPath_1">
                <polygon id="poly_1" points="70,8.19 7.56,55.88 31.53,133.44 108.5,133.5 132.44,56 "/>
            </clipPath>
            <pattern id="pattern_1" width="1" height="1" preserveAspectRatio="none">
                <image xlink:href="image_1.png" x="6.500000" y="6.500000" width="114" height="114" preserveAspectRatio="yes"></image>
            </pattern>
        </defs>
        <use xlink:href="#poly_1" x="0" y="0" fill="url(#pattern_1)" stroke="rgb(103, 103, 103)" stroke-width="13" />
    </svg>
</div>

The problem comes now. Somewhere on the HTML page, I add a shadowed and rotated rectangle containing an image.

<div style="left:58.99px ; top:90.18px; width:114px; height:114px; -webkit-filter:drop-shadow(2px 2px 1.2px rgba(26, 25, 24, 0.50)); -webkit-transform:rotate(-15deg);">
   <img src="image_1.png" alt="" style="width:114px; height:114px; "/>

The image within the rectangle looks blurry. The previous image within the SVG still looks ok. If I add the following code to the CSS file

img{
    -webkit-transform:translate3D(0,0,0); /* or even -webkit-transform:translateZ(0); */
}

the image within the rectangle looks good. BUT, the previous image within the SVG looks now blurry! I'm really puzzled. As I understand, transform:translateZ(0) turns the GPU acceleration on, and it re-blurs the SVG's image a second time. So, how can I get the 2 images look well? Or how to turn on/off the GPU acceleration? Should I use SVG rectangles all the time? I mean, should I use SVG for any shape? I come from Cocoa and OpenGL and I am new to HTML and CSS. At the first look it seems to be buggy and not so reliable. Is it true?

4

0 回答 0