2016-11-10 12 views
0

iOSデバイスで動作しないSVGがあります。iOS(iPad/iPhone)にSVG透過性が保存されていない

私は

https://jsfiddle.net/2fLuspdm/

<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
viewBox="0 0 1920 3840" style="enable-background:new 0 0 1920 3840;" xml:space="preserve"> 
    <style type="text/css">  
     .st0{opacity:6.000000e-02;fill:#609FD0;enable-background:new ;} 
    </style> 
    <polygon class="st0" points="1920,2614 1920,3641 1470,3005.1 "/> 
    <polygon class="st0" points="1920,1612.4 1210,780 1920,0.4 "/> 
    <polyline class="st0" points="0,0 650,0 0,1184.3 1,0 "/> 
    <polygon class="st0" points="0,898.4 960,1457 0,2778.4 "/> 
    <polygon class="st0" points="0,3837.4 0,2654 1040,3840 "/> 
    <polygon class="st0" points="1920,2926 1424,2239 1920,1046 "/> 
    <polygon class="st0" points="829,3840 1920,2926 1936,3840 "/> 
    <polygon class="st0" points="0,2530 0,1760 960,2909 "/> 
    <polygon class="st0" points="1920,0.4 1920,622 40,0.4 "/> 
    <polygon class="st0" points="1920,1634.5 1920,2404.5 1150,1435.5 "/> 
</svg> 

答えて

0

...唯一のSVGが青色のブロックの色として表示され、異なる層とそれらの不透明度レベルを維持しないChromeとSafariの両方で試してみました単に指数関数を計算するだけです(有効なSVG構文であるかどうかはわかりませんが、Safariではそれが気に入らない)。

<style type="text/css">  
    .st0{opacity:.06; fill:#609FD0; enable-background:new ;} 
</style> 
+0

ありがとうございました@duopixel、それは魅力的でした!私はイメージとしてそれを使用する場合でも、それでも本当に青いマスクをレンダリングします... https://jsfiddle.net/2fLuspdm/5/ アイデア? – Liam

+0

あなたのソースイメージにはまだ指数関数的なhttp://liamg.co.uk/bt.svg(ソースを表示)が含まれており、Illustratorに残された混乱を取り除く価値があります。 – Duopixel

関連する問題