Android SVG 显示问题

Question

我正在通过 Phonegap 构建一个应用程序，并决定在标签栏中使用 SVG 图标而不是 PNG。

我已经设法让它们在 iOS 中工作并且看起来不错，只是在 Android 中进行了测试，它们根本不显示。

我了解到 SVG 在 Android 2+ 中不受支持，但在 3+ 中支持 - 我的测试设备是运行 4.1.2 的三星 S2，所以我希望它们会出现？

这是内联 SVG 和 CSS 为它们着色。

SVG：

<a href="#view-3" class="tab-link">
                <svg version="1.1" id="Cabs" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     width="38px" height="38px" viewBox="0 0 38 38" enable-background="new 0 0 38 38" xml:space="preserve">
                <path id="Cab" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M36,35.004C36,35.555,35.568,36,35.035,36
                    H2.965C2.432,36,2,35.555,2,35.004V2.994C2,2.445,2.432,2,2.965,2h32.07C35.568,2,36,2.445,36,2.994V35.004z"/>
                <g id="Logo">
                    <path d="M22.057,18.429c0.008-0.221,0.033-0.38,0.081-0.488c0.048-0.105,0.147-0.157,0.299-0.157h0.008
                        c0.253,0,0.379,0.187,0.379,0.563v0.203h-0.387h-0.368C22.068,18.494,22.064,18.455,22.057,18.429 M22.437,19.273h1.468V18.16
                        c0-0.241-0.061-0.444-0.186-0.613c-0.125-0.165-0.291-0.287-0.506-0.364c-0.213-0.082-0.456-0.122-0.729-0.122h-0.048
                        c-0.974,0.018-1.464,0.446-1.464,1.3v1.649c0.015,0.38,0.151,0.667,0.417,0.848c0.255,0.184,0.604,0.273,1.047,0.277h0.034
                        c0.301,0,0.556-0.052,0.767-0.151c0.207-0.104,0.364-0.255,0.472-0.45c0.109-0.195,0.161-0.433,0.161-0.705
                        c0-0.018,0-0.04-0.004-0.069c-0.004-0.03-0.004-0.052-0.004-0.07h-1.079c0,0.243-0.022,0.417-0.065,0.517
                        c-0.042,0.095-0.134,0.146-0.281,0.15h-0.018c-0.104-0.01-0.186-0.043-0.247-0.104c-0.063-0.062-0.094-0.139-0.104-0.242v-0.737
                        H22.437z"/>
                    <path d="M20.259,17.447c-0.086-0.117-0.195-0.209-0.332-0.272c-0.14-0.066-0.287-0.096-0.442-0.096
                        c-0.181,0-0.347,0.048-0.494,0.144c-0.147,0.095-0.265,0.237-0.351,0.432v-0.49h-1.014v3.851h1.083v-2.757
                        c0-0.098,0.03-0.171,0.089-0.223c0.058-0.052,0.131-0.071,0.217-0.071c0.095,0,0.165,0.03,0.213,0.089
                        c0.048,0.062,0.068,0.135,0.068,0.217v2.746h1.082v-3.175C20.38,17.694,20.342,17.562,20.259,17.447"/>
                    <path d="M15.925,19.807c-0.012,0.177-0.05,0.311-0.125,0.402c-0.07,0.087-0.159,0.129-0.267,0.129h-0.01
                        c-0.107,0-0.199-0.029-0.276-0.096c-0.074-0.063-0.118-0.147-0.125-0.247c0-0.129,0.021-0.236,0.06-0.322
                        c0.04-0.088,0.096-0.157,0.165-0.217c0.048-0.04,0.108-0.078,0.177-0.114c0.036-0.021,0.074-0.04,0.114-0.056
                        c0.121-0.056,0.215-0.1,0.289-0.129V19.807z M17.008,20.677v-2.489c0-0.312-0.069-0.56-0.213-0.741
                        c-0.026-0.036-0.06-0.069-0.094-0.105c-0.082-0.074-0.195-0.133-0.342-0.181c-0.213-0.065-0.49-0.1-0.836-0.1h-0.004
                        c-0.312,0.004-0.576,0.056-0.79,0.147c-0.446,0.199-0.671,0.589-0.671,1.177h0.671h0.425c0-0.215,0.032-0.37,0.096-0.458
                        c0.058-0.074,0.147-0.117,0.272-0.125c0.022-0.004,0.044-0.004,0.066-0.004c0.089,0,0.173,0.038,0.239,0.122
                        c0.068,0.082,0.098,0.177,0.098,0.285c0,0.087-0.03,0.169-0.089,0.247c-0.062,0.082-0.147,0.133-0.261,0.165l-0.052,0.012
                        c-0.129,0.044-0.294,0.096-0.498,0.166c-0.108,0.034-0.208,0.074-0.296,0.111c-0.095,0.044-0.177,0.088-0.247,0.136
                        c-0.14,0.089-0.247,0.215-0.329,0.376s-0.129,0.364-0.133,0.615c0,0.237,0.043,0.442,0.133,0.611
                        c0.091,0.167,0.213,0.297,0.364,0.38c0.068,0.04,0.137,0.07,0.211,0.086c0.092,0.026,0.188,0.04,0.284,0.04
                        c0.177,0,0.345-0.034,0.51-0.111l0.018-0.01c0.173-0.082,0.311-0.199,0.424-0.351l0.065,0.338h0.329h0.436h0.309
                        C17.042,20.85,17.008,20.736,17.008,20.677"/>
                    <polygon points="12.547,19.983 12.296,19.983 12.296,15.858 12.105,15.858 11.344,15.858 11.076,15.858 11.076,21.015 
                        11.344,21.015 12.105,21.015 12.547,21.015 13.768,21.015 13.768,19.983   "/>
                    <path d="M28.601,22.484c0,0.197-0.159,0.356-0.354,0.356H9.801c-0.197,0-0.356-0.159-0.356-0.356v-6.909
                        c0-0.197,0.159-0.356,0.356-0.356h18.445c0.195,0,0.354,0.16,0.354,0.356V22.484z M28.179,14.882H9.821
                        c-0.394,0-0.715,0.319-0.715,0.715v6.805c0,0.395,0.321,0.715,0.715,0.715h18.357c0.395,0,0.715-0.32,0.715-0.715v-6.805
                        C28.894,15.201,28.573,14.882,28.179,14.882"/>
                    <path d="M26.048,17.164l-0.386,2.499H25.65l-0.364-2.499h-1.1l0.845,3.863c0.016,0.137,0.025,0.225,0.025,0.25
                        c0,0.074-0.031,0.126-0.092,0.17c-0.06,0.04-0.125,0.06-0.203,0.06c-0.018,0-0.033-0.004-0.056-0.008
                        c-0.021,0-0.044-0.004-0.065-0.012c-0.018-0.005-0.044-0.011-0.063-0.015c-0.024-0.004-0.04-0.008-0.054-0.008v0.822
                        c0.117,0.012,0.257,0.022,0.424,0.022c0.048,0,0.109,0,0.188-0.007c0.069,0,0.121-0.004,0.151-0.004
                        c0.159-0.023,0.303-0.081,0.42-0.155c0.121-0.073,0.229-0.199,0.328-0.38c0.096-0.178,0.186-0.43,0.255-0.749l0.818-3.851H26.048z"
                        />
                </g>
                </svg>
            </a>

CSS：

/* -------- CABS TAB --------*/

#Cabs #Logo {fill : #FFF;}
#Cabs #Cab {fill : transparent; stroke : #FFF;  }

.active #Cabs #Logo {fill : rgba(170, 28, 27, 1);}
.active #Cabs #Cab {fill : #FFF; stroke : #FFF;}

这就是它们在 iOS 中的样子：

在 Android 中，标签栏是空白的，只有红色背景..

我是 SVG 新手，所以不确定 Android 对什么不满意？

编辑：经过进一步调查，我通过 Object 和 img 标签添加了一个 svg - 这两个都显示了 - 但是使用这种方法我无法访问里面的 css 元素来设置它们的样式。但至少这表明我的设备确实支持 SVG，所以我猜上面的内联 SVG 有问题？

谢谢

Answer 1

经过一番严厉的批评，事实证明这是一个 css 问题。

Android 4.1.2 应该并且确实支持 SVG - 我有一些 css 说 svg 应该是 100% 的高度和宽度 - 这让它们消失了。我更改为像素高度和宽度，它们显示得很好！

Answer 2

这似乎只是一个 Android 4.1.2（可能是整个 Jellybean）问题。至少我刚才也有类似的问题。

缺少 SVG 的某些元素。 于是我调查了一下。 缺失的部分有一个共同点： 它们被放置在<g>-标签中。 所以我尝试删除所有<g>-tags，结果整个SVG随后丢失了。

似乎<g>-tags 需要在<defs>- 和<clipPath>-tags 附近，但<g>-tag 内的<polyline>- 或<path>-tags 不会显示。

我知道你的帖子已经有两年了，但也许有人会觉得这很有用。

Answer 3

我正要使用 SVG 报废，我正在使用 RaphaelJS 将图像渲染为 100%，并设置为像素值，它就出现了！

pupil.paper.setSize('250px', '250px');