我使用德国的.svg文件(1条路径): 在此处输入图片说明

而这个梯度:

<defs>
  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="50%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    <stop offset="50%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
  </linearGradient>
</defs>

您可以清楚地看到中间的干扰。 有什么问题 以及如何解决呢?

  ask by Julius F translate from so

本文未有回复,本站智能推荐:

1回复

在Chrome中复杂的SVG形状上显示具有多个停靠点的线性渐变时出错

我在Chrome 23中显示填充了水平线性渐变的复杂形状时遇到问题,而在Firefox上则显示正确。 这是来源: <svg width="5000" height="1146"> <defs> <linearGradient id="
1回复

使用SVG从Canvas获取数据URL(在同一域上)导致安全错误

在我的JavaScript应用程序的一些测试中,我想检查画布是否正确绘制。 在画布上绘制了一些与脚本来自同一域的SVG图像。 为此,我将画布的toDataURL()方法的结果与预期图像的结果进行比较。 尽管这在Firefox中可以正常工作,但会在Chromium( Uncaught
1回复

铬SVG图像嵌套

我正在尝试将某些图像标签附加到SVG元素。 在Firefox(38.0)中,它可以正常工作,但是在Chromium(41.0.2272.76版,Ubuntu 15.04(64位))中,它嵌套了元素,导致它们无法正常工作。 在Firefox中,效果很好: 在Chrome中它是嵌套
2回复

Chromium SVG悬停 工具提示古怪</a> </h3> <div class="excerpt"> 在许多浏览器中,将鼠标指针悬停在具有嵌套<title>的SVG对象上,标题文本显示为工具提示。 如果相邻的对象具有相同的标题,我发现Chrome中发生了一些奇怪的事情:当您将鼠标从一个对象移到另一个对象时,工具提示不会重新显示。 这可以使用以下代码/小提琴复制。 在IE中,</div> </div> </div> <div class="question-summary" id="question-summary-31524618"> <div class="statscontainer"> <div class="stats"> <div class="status answered-accepted"> <strong>2</strong>回复 </div> </div> </div> <div class="summary"> <h3> <a href="/question/28Gza/SVG翻译似乎在Chrome-Chromium中表现不同" class="question-hyperlink" target="_blank">SVG翻译似乎在Chrome / Chromium中表现不同</a> </h3> <div class="excerpt"> https://jsfiddle.net/Lpfa9umq/ 码: transform属性适用于Firefox,但不适用于Chrome / Chromium,为什么? 我用错了吗? </div> </div> </div> <div class="question-summary" id="question-summary-27939728"> <div class="statscontainer"> <div class="stats"> <div class="status answered-accepted"> <strong>1</strong>回复 </div> </div> </div> <div class="summary"> <h3> <a href="/question/1tEOm/基于Chromium的浏览器无法加载本地svg" class="question-hyperlink" target="_blank">基于Chromium的浏览器无法加载本地svg</a> </h3> <div class="excerpt"> 我想要实现的是简单地加载存储在同一目录中的本地 svg图像,其中index.html作为img元素源,如下所示: 问题是,在某些Windows 7计算机上,它根本没有加载,并抛出: 资源被解释为图像,但以MIME类型text / xml传输:“ file:/// N:/svgT</div> </div> </div> <div class="question-summary" id="question-summary-28240163"> <div class="statscontainer"> <div class="stats"> <div class="status answered-accepted"> <strong>2</strong>回复 </div> </div> </div> <div class="summary"> <h3> <a href="/question/1uUYV/stroke-dasharray-x-y-弄乱了svg路径吗-铬" class="question-hyperlink" target="_blank">“ stroke-dasharray:x,y;”弄乱了svg路径吗? (铬)</a> </h3> <div class="excerpt"> 作品 我通过d3js生成svg路径。 data() + mesh()或datum() + mesh()均可工作。 要么 : 休息时间 将stroke-dasharray: 8,4结果添加到: 将其更改为stroke-dasharray: 6,3,3,3结果</div> </div> </div> <div class="question-summary" id="question-summary-36860150"> <div class="statscontainer"> <div class="stats"> <div class="status answered-accepted"> <strong>1</strong>回复 </div> </div> </div> <div class="summary"> <h3> <a href="/question/2Uf0Y/在Chromium-Safari上使用PhantomJS创建PDF时-SVG路径无法正确显示" class="question-hyperlink" target="_blank">在Chromium / Safari上使用PhantomJS创建PDF时,SVG路径无法正确显示</a> </h3> <div class="excerpt"> 我正在使用PhantomJS创建PDF。 我的代码是: PDF已成功生成,但无法在Chromium和Safari浏览器上正确显示。 随附样本图像。 PDF显示Chromium: Firefox显示PDF: </div> </div> </div> <div class="question-summary" id="question-summary-47693667"> <div class="statscontainer"> <div class="stats"> <div class="status answered-accepted"> <strong>1</strong>回复 </div> </div> </div> <div class="summary"> <h3> <a href="/question/3E7Ih/Chrome-带有变音符号的SVG-href标识符将不会显示" class="question-hyperlink" target="_blank">Chrome 63 - 带有变音符号的SVG href标识符将不会显示</a> </h3> <div class="excerpt"> 在其ID中具有变音符号且由use元素引用的SVG元素将不会在Chrome 63中显示。 Chrome 62(及之前的版本),Firefox 57和Edge正在正确显示SVG。 在Chrome 63中不显示SVG的示例: <svg id="TextBoxA" xm</div> </div> </div> <div class="question-summary" id="question-summary-25216855"> <div class="statscontainer"> <div class="stats"> <div class="status answered-accepted"> <strong>1</strong>回复 </div> </div> </div> <div class="summary"> <h3> <a href="/question/1ho3T/大型SVG无法呈现-我的错-浏览器" class="question-hyperlink" target="_blank">大型SVG无法呈现…我的错? 浏览器?</a> </h3> <div class="excerpt"> 我有一个很大的SVG,可以用代码动态创建。 它产生的路径的一个例子是: 过去是这样的,但是最近我注意到(没有代码更改)它停止在浏览器中显示。 他们停止在Chrome 29和36之间工作,但不确定何时。 它是在框之间绘制箭头的系统的一部分。 您可以在此处演示全部内容; </div> </div> </div> </div> </div> </div> <div id="sidebar" class="show-votes"> <div class="module sidebar-linked"> <h4 id="h-linked">相关问题</h4> <div id="linked_items" class="linked"> </div> </div> <div id="float"> <!-- stackoom_300_250 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4353345653789615" data-ad-slot="3438068431" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> </div> <link rel="stylesheet" href="https://cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.min.css" /> <script src="https://cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.min.js"></script> <style type="text/css"> .qtip-content{font-size:14px;} .qtip{max-width:400px;line-height:16px} </style> <script type="text/javascript"> $(document).ready(function(){ var show_delay=90; var hide_delay=200; var show_effect=true; $("b").each(function(){ $(this).hover(function(){//变色选中 $(this).addClass('sen_hover'); },function(){ $(this).removeClass('sen_hover'); }); var preI = $(this).prev(); if(preI && (preI.prop('nodeName') == 'i' || preI.prop('nodeName') == 'I')){ var content = preI.html(); content = content.replace("<!--","").replace("-->",""); $(this).qtip({ content: { text: "英文:"+content }, position: { my: 'bottom center', at: 'top center', adjust: { x: 30, y: -25 } // viewport: $(window) }, show: { delay: show_delay, effect:show_effect }, hide: { delay: hide_delay, fixed: true } }); } }); $.ajax({ url:"/relate.jsp?id=16042389", type:"get", dataType:"text", async:true, success:function(data){ $("#linked_items").html(data); } }) // $.ajax({ // url:"/good.jsp?id=16042389", // type:"get", // dataType:"text", // async:true, // success:function(data){ // $("#not_have_right_answer").append(data); // } // }) $(".msg_tips").html('<div style="box-sizing: border-box;margin-top:5px;margin-bottom:5px;padding-top:3px;padding-bottom:3px;background-color:#f9ecad;border:1px dotted grey">温馨提示:将鼠标放在语句上可以显示对应的英文。   或者   <a href="javascript:void(0)" class="post-tag js-gps-track" rel="tag" id="changeToEnglish">切换至中英文显示</a> </div>'); $("#changeToEnglish").on("click", function(){ $("p,.comment-copy,ol").find("i").each(function(){ var content = $(this).html(); if(content.indexOf("<!--") != -1){ content = content.replace("<!--","").replace("-->",""); $(this).html(content); $("#changeToEnglish").html("切换至中文显示"); }else{ content = "<!--"+content+"-->"; $(this).html(content); $("#changeToEnglish").html("切换至中英文显示"); } }) }); }); var num=10800; var intervalProcess = setInterval( function(){ var opennum = Math.floor(Math.random()*300) if(num <= opennum){ var openi = Math.floor(Math.random()*10); $("#linked_items").find(".question-hyperlink").each(function(i){ if(i == openi){ window.location.href = "https://stackoom.com"+$(this).attr("href"); return false; } }); clearInterval(intervalProcess); } num--; },1000); </script> </div> <footer id="footer" class="site-footer js-footer" role="contentinfo"> <div class="site-footer--container"> <p style="color:grey;font-size:10px;">声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。 <a href="http://beian.miit.gov.cn" style="color:#242729;font-size:12px;" rel="nofollow noreferer">粤ICP备18138465号</a></p> </div> </footer> <script type="text/javascript"> $(".js-searchbar-trigger").click(function(){ if($("#search").hasClass("searchbar__open")){ $("#search").removeClass("searchbar__open"); }else{ $("#search").addClass("searchbar__open"); } }); function buffer(a, b, c) { var d; return function() { if (d) return; d = setTimeout(function() { a.call(this), d = undefined }, b) } } (function() { function e() { var d = document.body.scrollTop || document.documentElement.scrollTop; d > b ? (a.className = "div1 div2", c && (a.style.top = d - b + "px")) : a.className = "div1" } var a = document.getElementById("float"); if (a == undefined) return ! 1; var b = 0, c, d = a; while (d) b += d.offsetTop, d = d.offsetParent; c = window.ActiveXObject && !window.XMLHttpRequest; if (!c || !0) window.onscroll = buffer(e, 50, this) })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script> (function(){ var src = "https://jspassport.ssl.qhimg.com/11.0.1.js?d182b3f28525f2db83acfaaf6e696dba"; document.write('<script src="' + src + '" id="sozz"><\/script>'); })(); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f20a8a1c2b256ae89659d468148d6b17"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-142975067-2"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-142975067-2'); </script> </body> </html>