Android SVG显示问题

Question

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

我已经设法让他们在iOS上工作并且看起来很好，只是在Android中测试过，他们根本没有出现。

我读到Android 2+不支持SVG但是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

我正准备使用SVG废弃，我使用RaphaelJS将图像渲染为100％，并设置为像素值，它出现了！

{
  "query": {
    "match": {
      "type": "inanimate"
    }
  }
}

Answer 3

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

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

好像<g> - 标签需要在<defs> - 和<clipPath> - 标签周围，但<polyline> - 或<path> - 标签位于{{ 1}} - 标签不会显示。

我知道你的帖子已经有两年了，但也许有人会发现它很有用。