svg图像未在移动模拟器中显示
我正在测试纹波仿真器中的ioinc cordova应用程序以下svg数据点未在纹波仿真器中正确显示，其中图像在浏览器中完美显示，这里是jsfiddle
＆＃13;
＆＃13;
＆＃13;
＆＃13;
<svg width="400" height="400" viewBox="0 0 100 100"><defs><pattern id="sign-0" patternUnits="userSpaceOnUse" height="25" width="25"><image x="0" y="0" height="12.5" width="12.5" xlink:href="http://live.makemypublication.com/Images/Pisces.png"></image></pattern><pattern id="sign-1" patternUnits="userSpaceOnUse" height="25" width="25"><image x="0" y="0" height="12.5" width="12.5" xlink:href="http://live.makemypublication.com/Images/Aquarius.png"></image></pattern><pattern id="sign-2" patternUnits="userSpaceOnUse" height="25" width="25"><image x="0" y="0" height="12.5" width="12.5" xlink:href="http://live.makemypublication.com/Images/Capricorn.png"></image></pattern><pattern id="sign-3" patternUnits="userSpaceOnUse" height="25" width="25"><image x="0" y="0" height="12.5" width="12.5" xlink:href="http://live.makemypublication.com/Images/Saggitarius.png"></image></pattern><pattern id="sign-4" patternUnits="userSpaceOnUse" height="25" width="25"><image x="0" y="0" height="12.5" width="12.5" xlink:href="http://live.makemypublication.com/Images/Aries.png"></image></pattern><pattern id="sign-7" patternUnits="userSpaceOnUse" height="25" width="25"><image x="0" y="0" height="12.5" width="12.5" xlink:href="http://live.makemypublication.com/Images/Scorpio.png"></image></pattern><pattern id="sign-8" patternUnits="userSpaceOnUse" height="25" width="25"><image x="0" y="0" height="12.5" width="12.5" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://live.makemypublication.com/Images/Taurus.png"></image></pattern><pattern id="sign-11" patternUnits="userSpaceOnUse" height="25" width="25"><image x="0" y="0" height="12.5" width="12.5" xlink:href="http://live.makemypublication.com/Images/Libra.png"></image></pattern><pattern id="sign-12" patternUnits="userSpaceOnUse" height="25" width="25"><image x="0" y="0" height="12.5" width="12.5" xlink:href="http://live.makemypublication.com/Images/Gemeni.png"></image></pattern><pattern id="sign-13" patternUnits="userSpaceOnUse" height="25" width="25"><image x="0" y="0" height="12.5" width="12.5" xlink:href="http://live.makemypublication.com/Images/Cancer.png"></image></pattern><pattern id="sign-14" patternUnits="userSpaceOnUse" height="25" width="25"><image x="0" y="0" height="12.5" width="12.5" xlink:href="http://live.makemypublication.com/Images/leo.png"></image></pattern><pattern id="sign-15" patternUnits="userSpaceOnUse" height="25" width="25"><image x="0" y="0" height="12.5" width="12.5" xlink:href="http://live.makemypublication.com/Images/Virgo.png"></image></pattern></defs><g transform="translate(0,0)"><rect width="25" height="25" border="1" stroke="black" fill="url(#sign-0)" id="b0"></rect><text font-size="3" x="5" y="3" id="t0">9.21 Su</text><text font-size="3" x="5" y="6" id="t0">27.42 Me</text><text font-size="3" x="5" y="9" id="t0">19.14 Ju</text><text font-size="3" x="5" y="12" id="t0">6.41 Ur</text></g><g transform="translate(0,25)"><rect width="25" height="25" border="1" stroke="black" fill="url(#sign-1)" id="b1"></rect><text font-size="3" x="5" y="3" id="t1">2.29 Ve</text><text font-size="3" x="5" y="6" id="t1">29. Ma</text><text font-size="3" x="5" y="9" id="t1">5.37 Ne</text></g><g transform="translate(0,50)"><rect width="25" height="25" border="1" stroke="black" fill="url(#sign-2)" id="b2"></rect></g><g transform="translate(0,75)"><rect width="25" height="25" border="1" stroke="black" fill="url(#sign-3)" id="b3"></rect><text font-size="3" x="5" y="3" id="t3">13.25 Pl</text><text font-size="3" x="5" y="6" id="t3">3.22 Ra</text></g><g transform="translate(25,0)"><rect width="25" height="25" border="1" stroke="black" fill="url(#sign-4)" id="b4"></rect></g><g transform="translate(25,25)"><rect width="50" height="50" border="1" stroke="black" fill="#f4a460" id="b5"></rect><text fill="white" font-size="5" x="10" y="25" id="t5">BIRTH CHART</text></g><g transform="translate(25,75)"><rect width="25" height="25" border="1" stroke="black" fill="url(#sign-7)" id="b7"></rect><text font-size="3" x="5" y="3" id="t7">13.11 Mo</text></g><g transform="translate(50,0)"><rect width="25" height="25" border="1" stroke="black" fill="url(#sign-8)" id="b8"></rect><text font-size="3" x="5" y="3" id="t8">22 AC</text></g><g transform="translate(50,75)"><rect width="25" height="25" border="1" stroke="black" fill="url(#sign-11)" id="b11"></rect></g><g transform="translate(75,0)"><rect width="25" height="25" border="1" stroke="black" fill="url(#sign-12)" id="b12"></rect><text font-size="3" x="5" y="3" id="t12">3.22 Ke</text></g><g transform="translate(75,25)"><rect width="25" height="25" border="1" stroke="black" fill="url(#sign-13)" id="b13"></rect></g><g transform="translate(75,50)"><rect width="25" height="25" border="1" stroke="black" fill="url(#sign-14)" id="b14"></rect></g><g transform="translate(75,75)"><rect width="25" height="25" border="1" stroke="black" fill="url(#sign-15)" id="b15"></rect><text font-size="3" x="5" y="3" id="t15">20.40 Sa</text></g></svg>
如果在纹波仿真器中无法正确显示，那么我猜测对移动设备也会产生同样的影响。有任何建议如何解决问题？
UPDATE-1：
在边缘模拟器框中显示，图像不显示但是存在缩放问题以及可能与viewBox属性有关???
以下是生成网格系统的代码片段
grid(numberPerSide, size, pixelsPerSide, plps) {
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
this.renderer.setAttribute(svg, "width", pixelsPerSide);
//this.renderer.setAttribute(svg, "height", height);
this.renderer.setAttribute(svg, "viewBox", [0, 0, numberPerSide * size, numberPerSide * size].join(" "));
var defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
var pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
this.renderer.setAttribute(pattern, "id", "sign-0");
this.renderer.setAttribute(pattern,"patternUnits", "userSpaceOnUse");
//this.renderer.setAttribute(pattern, "height", size);
this.renderer.setAttribute(pattern, "width", size);
var image = document.createElementNS("http://www.w3.org/2000/svg", "image");
this.renderer.setAttribute(image, "x", "0");
this.renderer.setAttribute(image, "y", "0");
//this.renderer.setAttribute(image, "height", size / 2);
this.renderer.setAttribute(image, "width", size / 2);
this.renderer.setAttribute(image, "xlink:href",
"http://live.makemypublication.com/Images/Pisces.png");
this.renderer.appendChild(pattern, image);
this.renderer.appendChild(defs, pattern);
pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
this.renderer.setAttribute(pattern, "id", "sign-1");
this.renderer.setAttribute(pattern, "patternUnits", "userSpaceOnUse");
//this.renderer.setAttribute(pattern, "height", size);
this.renderer.setAttribute(pattern, "width", size);
image = document.createElementNS("http://www.w3.org/2000/svg", "image");
this.renderer.setAttribute(image, "x", "0");
this.renderer.setAttribute(image, "y", "0");
this.renderer.setAttribute(image, "height", size / 2);
this.renderer.setAttribute(image, "width", size / 2);
this.renderer.setAttribute(image, "xlink:href",
"http://live.makemypublication.com/Images/Aquarius.png");
this.renderer.appendChild(pattern, image);
this.renderer.appendChild(defs, pattern);
pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
pattern.setAttribute("id", "sign-2");
pattern.setAttribute("patternUnits", "userSpaceOnUse");
pattern.setAttribute("height", size);
pattern.setAttribute("width", size);
image = document.createElementNS("http://www.w3.org/2000/svg", "image");
image.setAttribute("x", "0");
image.setAttribute("y", "0");
image.setAttribute("height", size / 2);
image.setAttribute("width", size / 2);
this.renderer.setAttribute(image, "xlink:href",
"http://live.makemypublication.com/Images/Capricorn.png");
this.renderer.appendChild(pattern, image);
this.renderer.appendChild(defs, pattern);
pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
pattern.setAttribute("id", "sign-3");
pattern.setAttribute("patternUnits", "userSpaceOnUse");
pattern.setAttribute("height", size);
pattern.setAttribute("width", size);
image = document.createElementNS("http://www.w3.org/2000/svg", "image");
image.setAttribute("x", "0");
image.setAttribute("y", "0");
image.setAttribute("height", size / 2);
image.setAttribute("width", size / 2);
this.renderer.setAttribute(image, "xlink:href",
"http://live.makemypublication.com/Images/Saggitarius.png");
this.renderer.appendChild(pattern, image);
this.renderer.appendChild(defs, pattern);
pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
pattern.setAttribute("id", "sign-4");
pattern.setAttribute("patternUnits", "userSpaceOnUse");
pattern.setAttribute("height", size);
pattern.setAttribute("width", size);
image = document.createElementNS("http://www.w3.org/2000/svg", "image");
image.setAttribute("x", "0");
image.setAttribute("y", "0");
image.setAttribute("height", size / 2);
image.setAttribute("width", size / 2);
this.renderer.setAttribute(image, "xlink:href",
"http://live.makemypublication.com/Images/Aries.png");
this.renderer.appendChild(pattern, image);
this.renderer.appendChild(defs, pattern);
pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
pattern.setAttribute("id", "sign-7");
pattern.setAttribute("patternUnits", "userSpaceOnUse");
pattern.setAttribute("height", size);
pattern.setAttribute("width", size);
image = document.createElementNS("http://www.w3.org/2000/svg", "image");
image.setAttribute("x", "0");
image.setAttribute("y", "0");
image.setAttribute("height", size / 2);
image.setAttribute("width", size / 2);
this.renderer.setAttribute(image, "xlink:href",
"http://live.makemypublication.com/Images/Scorpio.png");
this.renderer.appendChild(pattern, image);
this.renderer.appendChild(defs, pattern);
pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
pattern.setAttribute("id", "sign-8");
pattern.setAttribute("patternUnits", "userSpaceOnUse");
pattern.setAttribute("height", size);
pattern.setAttribute("width", size);
image = document.createElementNS("http://www.w3.org/2000/svg", "image");
image.setAttribute("x", "0");
image.setAttribute("y", "0");
image.setAttribute("height", size / 2);
image.setAttribute("width", size / 2);
image.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href",
"http://live.makemypublication.com/Images/Taurus.png");
this.renderer.appendChild(pattern, image);
this.renderer.appendChild(defs, pattern);
pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
pattern.setAttribute("id", "sign-11");
pattern.setAttribute("patternUnits", "userSpaceOnUse");
pattern.setAttribute("height", size);
pattern.setAttribute("width", size);
image = document.createElementNS("http://www.w3.org/2000/svg", "image");
image.setAttribute("x", "0");
image.setAttribute("y", "0");
image.setAttribute("height", size / 2);
image.setAttribute("width", size / 2);
this.renderer.setAttribute(image, "xlink:href",
"http://live.makemypublication.com/Images/Libra.png");
this.renderer.appendChild(pattern, image);
this.renderer.appendChild(defs, pattern);
pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
pattern.setAttribute("id", "sign-12");
pattern.setAttribute("patternUnits", "userSpaceOnUse");
pattern.setAttribute("height", size);
pattern.setAttribute("width", size);
image = document.createElementNS("http://www.w3.org/2000/svg", "image");
image.setAttribute("x", "0");
image.setAttribute("y", "0");
image.setAttribute("height", size / 2);
image.setAttribute("width", size / 2);
this.renderer.setAttribute(image, "xlink:href",
"http://live.makemypublication.com/Images/Gemeni.png");
this.renderer.appendChild(pattern, image);
this.renderer.appendChild(defs, pattern);
pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
pattern.setAttribute("id", "sign-13");
pattern.setAttribute("patternUnits", "userSpaceOnUse");
pattern.setAttribute("height", size);
pattern.setAttribute("width", size);
image = document.createElementNS("http://www.w3.org/2000/svg", "image");
image.setAttribute("x", "0");
image.setAttribute("y", "0");
image.setAttribute("height", size / 2);
image.setAttribute("width", size / 2);
this.renderer.setAttribute(image, "xlink:href",
"http://live.makemypublication.com/Images/Cancer.png");
this.renderer.appendChild(pattern, image);
this.renderer.appendChild(defs, pattern);
pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
pattern.setAttribute("id", "sign-14");
pattern.setAttribute("patternUnits", "userSpaceOnUse");
pattern.setAttribute("height", size);
pattern.setAttribute("width", size);
image = document.createElementNS("http://www.w3.org/2000/svg", "image");
image.setAttribute("x", "0");
image.setAttribute("y", "0");
image.setAttribute("height", size / 2);
image.setAttribute("width", size / 2);
this.renderer.setAttribute(image, "xlink:href",
"http://live.makemypublication.com/Images/leo.png");
this.renderer.appendChild(pattern, image);
this.renderer.appendChild(defs, pattern);
pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
pattern.setAttribute("id", "sign-15");
pattern.setAttribute("patternUnits", "userSpaceOnUse");
pattern.setAttribute("height", size);
pattern.setAttribute("width", size);
image = document.createElementNS("http://www.w3.org/2000/svg", "image");
image.setAttribute("x", "0");
image.setAttribute("y", "0");
image.setAttribute("height", size / 2);
image.setAttribute("width", size / 2);
this.renderer.setAttribute(image, "xlink:href",
"http://live.makemypublication.com/Images/Virgo.png");
this.renderer.appendChild(pattern, image);
this.renderer.appendChild(defs, pattern);
this.renderer.appendChild(svg, defs);
var border = 1;
for (var i = 0; i < numberPerSide; i++) {
for (var j = 0; j < numberPerSide; j++) {
if ((i * numberPerSide + j) == 5 || (i * numberPerSide + j) == 6 || (i * numberPerSide + j) == 9 || (i * numberPerSide + j) == 10) {
if ((i * numberPerSide + j) == 5) {
var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
this.renderer.setAttribute(g, "transform", ["translate(", i * size, ",", j * size, ")"].join(""));
var number = numberPerSide * i + j;
var box = document.createElementNS("http://www.w3.org/2000/svg", "rect");
this.renderer.setAttribute(box, "width", size * 2);
this.renderer.setAttribute(box, "height", size * 2);
this.renderer.setAttribute(box, "border", border);
this.renderer.setAttribute(box, "stroke", "black");
this.renderer.setAttribute(box, "fill", "#f4a460");
this.renderer.setAttribute(box, "id", "b" + number);
this.renderer.appendChild(g, box);
var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
this.renderer.appendChild(text, document.createTextNode("BIRTH CHART"));
this.renderer.setAttribute(text, "fill", "white");
this.renderer.setAttribute(text, "font-size", 5);
this.renderer.setAttribute(text, "x", size * 2 / 5);
this.renderer.setAttribute(text, "y", size * 2 / 2);
this.renderer.setAttribute(text, "id", "t" + number);
g.appendChild(text);
svg.appendChild(g);
}
continue;
}
// var zodiac1 = zodiacs[(i + j) % zodiacs.length];
// var zodiac2 = zodiacs[(i + j + 1) % zodiacs.length];
g = document.createElementNS("http://www.w3.org/2000/svg", "g");
this.renderer.setAttribute(g, "transform", ["translate(", i * size, ",", j * size, ")"].join(""));
number = numberPerSide * i + j;
box = document.createElementNS("http://www.w3.org/2000/svg", "rect");
var sign = "url(#sign-" + number.toString() + ")";
this.renderer.setAttribute(box, "width", size);
this.renderer.setAttribute(box, "height", size);
this.renderer.setAttribute(box, "border", border);
this.renderer.setAttribute(box, "stroke", "black");
this.renderer.setAttribute(box, "fill", sign);
this.renderer.setAttribute(box, "id", "b" + number);
this.renderer.appendChild(g, box);
sign = signs[number];
if (plps.hasOwnProperty(sign)) {
//var pls = replaceAll(plps[sign], '\|', '');
//var pls = plps[sign].replace(/\|/g, ' ');
var pls = plps[sign].split('\|');
var pcnt = 0;
for (var k = 0; k < pls.length; k++) {
if (pls[k].split(' ')[1] == 'me' || pls[k].split(' ')[1] == 'os') continue;
if (pls[k].split(' ')[1] == 'AC') this.asc_sign = sign;
else if (pls[k].split(' ')[1] == 'Mo') {
this.moon_sign = sign;
this.moon_deg = Number(pls[k].split(' ')[0]);
}
pcnt++;
text = document.createElementNS("http://www.w3.org/2000/svg", "text");
this.renderer.appendChild(text, document.createTextNode(pls[k]));
//text.setAttribute("fill", zodiac2);
this.renderer.setAttribute(text, "font-size", 3);
this.renderer.setAttribute(text, "x", 5);
this.renderer.setAttribute(text, "y", 3 * pcnt);
this.renderer.setAttribute(text, "id", "t" + number);
g.appendChild(text);
}
}
svg.appendChild(g);
}
}
g = document.createElementNS("http://www.w3.org/2000/svg", "g");
this.renderer.setAttribute(g, "transform", ["translate(", i * size, ",", j * size, ")"].join(""));
number = numberPerSide * i + j;
for (i = 0; i < 12; i++) {
if (o_signs[i] == this.asc_sign) {
//if (plPos.hasOwnProperty(this.asc_sign)) {
this.trikona_lords = rashi_lords[o_signs[i]];
this.kendra_lords = rashi_lords[o_signs[i]];
//}
var as = 1;
rashis[this.asc_sign] = '1|' + rashis[this.asc_sign].split('\|')[1];
for (j = i + 1; j < 12; j++) {
as++;
rashis[o_signs[j]] = (as).toString() + '|' + rashis[o_signs[j]].split('\|')[1];
//if (plPos.hasOwnProperty(o_signs[j])) {
if (as == 5 || as == 9) {
this.trikona_lords = this.trikona_lords + '|' + rashi_lords[o_signs[j]];
}
else if (as == 4 || as == 7 || as == 10) {
this.kendra_lords = this.kendra_lords + '|' + rashi_lords[o_signs[j]];
}
//}
}
for (k = 0; k < i; k++) {
var hno = ((12 - i) + (k + 1));
rashis[o_signs[k]] = hno.toString() + '|' + rashis[o_signs[k]].split('\|')[1];
//if (plPos.hasOwnProperty(o_signs[k])) {
if (hno == 5 || hno == 9) {
this.trikona_lords = this.trikona_lords + '|' + rashi_lords[o_signs[k]];
}
else if (hno == 4 || hno == 7 || hno == 10) {
this.kendra_lords = this.kendra_lords + '|' + rashi_lords[o_signs[k]];
}
//}
}
}
}
return svg;
};
感谢您的时间和注意
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？