Windows 8 上的 Safari 5 反转 SVG 上的所有文本元素
Safari 5 on Windows 8 inverts all text-elements on SVG
我有一个应用程序,其中我使用 D3 创建 SVG 图表.js(版本 3)。这在所有浏览器中都可以正常工作,除了 Safari(Windows 8.1 上的版本 5.1.7)。Safari 浏览器将所有文本元素倒置显示,y 值反转。
另一个事实是,当我保存生成的SVG代码然后将其加载到Safari中时,一切都很好。
有谁知道这是否是已知问题/错误?有没有办法轻松解决这个问题,或者我应该在我的 Safari 的 JS-文件中添加一些特殊的代码。
为了指定我的问题,我添加了两个屏幕截图,顶部是它在Safari中的显示方式,下面是它应该如何显示。
野生动物园:
野生动物园 http://www.leonhooijer.nl/Safari.png
其他浏览器:
应该 http://www.leonhooijer.nl/Chrome.png
这里还有生成的 SVG 代码:
<svg width="473" height="357" viewBox="0 0 530 400" perserveAspectRatio="xMinYMid" class="chart" style="margin-left:8.5px">
<g class="arc" transform="translate(265,200)">
<path d="M9.490699242123424e-15,-155A155,155 0 0,1 87.92411853567042,127.64932189293204L0,0Z" class="first_group"></path>
<path d="M87.92411853567042,127.64932189293204A155,155 0 0,1 -79.92927812076182,132.80177144561705L0,0Z" class="second_group"></path>
<path d="M-79.92927812076182,132.80177144561705A155,155 0 0,1 -152.74492900530055,26.34362661376928L0,0Z" class="third_group"></path>
<path d="M-152.74492900530055,26.34362661376928A155,155 0 0,1 -140.44015392173435,-65.58630319235537L0,0Z" class="fourth_group"></path>
<path d="M-140.44015392173435,-65.58630319235537A155,155 0 0,1 -97.60019756608148,-120.41262988184363L0,0Z" class="fifth_group"></path>
<path d="M-97.60019756608148,-120.41262988184363A155,155 0 0,1 -64.84357257048977,-140.78462663336373L0,0Z" class="sixth_group"></path>
<path d="M-64.84357257048977,-140.78462663336373A155,155 0 0,1 -2.847209772637027e-14,-155L0,0Z" class="seventh_group"></path>
</g>
<g class="lbls" transform="translate(265,200)">
<line x1="0" x2="0" y1="-158" y2="-170" class="first_group" transform="rotate(72.72057342529297)"></line>
<line x1="0" x2="0" y1="-158" y2="-170" class="second_group" transform="rotate(178.24179077148438)scale(1,1)"></line>
<line x1="0" x2="0" y1="-158" y2="-170" class="third_group" transform="rotate(235.62850952148438)scale(1,1)"></line>
<line x1="0" x2="0" y1="-158" y2="-170" class="fourth_group" transform="rotate(-82.37631225585939)"></line>
<line x1="0" x2="0" y1="-158" y2="-170" class="fifth_group" transform="rotate(-51.996795654296896)scale(0.9999999999999999,0.9999999999999999)"></line>
<line x1="0" x2="0" y1="-158" y2="-170" class="sixth_group" transform="rotate(-31.87829589843751)"></line>
<line x1="0" x2="0" y1="-158" y2="-170" class="seventh_group" transform="rotate(-12.365081787109395)"></line>
<text transform="translate(170.92128845655768,-53.16872344104387)" class="value first_group" dy="-10" text-anchor="beginning">40.4%</text>
<text transform="translate(5.492020303912323,178.91572796426092)" class="value second_group" dy="2" text-anchor="beginning">18.2%</text>
<text transform="translate(-147.74560637652337,101.05560744675884)" class="value third_group" dy="2" text-anchor="end">13.7%</text>
<text transform="translate(-177.41777441646744,-23.74728028864517)" class="value fourth_group" dy="-10" text-anchor="end">9.7%</text>
<text transform="translate(-141.0477648281888,-110.21128815585067)" class="value fifth_group" dy="-10" text-anchor="end">7.2%</text>
<text transform="translate(-94.53290710464508,-152.00174168194437)" class="value sixth_group" dy="-10" text-anchor="end">4.0%</text>
<text transform="translate(-38.331103265489965,-174.84772381260885)" class="value seventh_group" dy="-10" text-anchor="end">6.9%</text>
<text transform="translate(170.92128845655768,-53.16872344104387)" class="units first_group" dy="8" text-anchor="beginning">0</text>
<text transform="translate(5.492020303912323,178.91572796426092)" class="units second_group" dy="20" text-anchor="beginning">1</text>
<text transform="translate(-147.74560637652337,101.05560744675884)" class="units third_group" dy="20" text-anchor="end">2</text>
<text transform="translate(-177.41777441646744,-23.74728028864517)" class="units fourth_group" dy="8" text-anchor="end">3</text>
<text transform="translate(-141.0477648281888,-110.21128815585067)" class="units fifth_group" dy="8" text-anchor="end">4</text>
<text transform="translate(-94.53290710464508,-152.00174168194437)" class="units sixth_group" dy="8" text-anchor="end">5</text>
<text transform="translate(-38.331103265489965,-174.84772381260885)" class="units seventh_group" dy="8" text-anchor="end">6+</text>
</g>
编辑:
我在这个网站上发现 Safari 不支持该视图框。这会导致问题吗?我确实使用视图框来处理页面大小调整。
我找到了解决这个问题的方法,因为它也发生在我身上。
-webkit-font-smoothing: antialiased;
那是在我的 CSS 的正文标签中设置的,删除它,修复它。我认为它在渲染抗锯齿文本时存在问题。
因此,如果您没有使用该 CSS 命令,请尝试使用以下方法禁用字体平滑:
-webkit-font-smoothing: none;
希望有帮助。
据我所知,这是因为 CSS3 已用于 D3 中的过渡,您需要按照 W3C 中的建议进行 WEBkit。
http://www.w3schools.com/css/css3_2dtransforms.asp
因此出现此问题。
关于这个翻译有很多问题。
https://groups.google.com/forum/#!topic/d3-js/WqGkpYKpXfc
我也仍然找不到合适的方法来解决它。
相关文章:
- 如何在浏览器中选择所有*renderable*文本元素
- 如何使用RaphaelJS将文本元素约束在正方形中
- 使用d3.js删除svg文本元素
- 替换动态生成的文本元素
- Protractor测试:如何设置登录表单中文本元素的值
- 如何获取与提交表单上所选复选框相同行的文本元素
- SVG文本锚点设置使文本元素移动
- Svg文本元素被另一个Svg元素重叠
- Imacros替换文本元素
- Windows 8 上的 Safari 5 反转 SVG 上的所有文本元素
- 运行 PHP 代码以根据文本元素的值从数据库中获取值
- 我想要输入文本元素中的实时更改事件
- 如何使用 jQuery 忽略文本元素上的特定字符
- RaphaelJS中的文本元素不会在触摸设备上拖动
- d3 - 旋转数组中的文本元素
- 如何通过单击复选框将文本元素从输入复制到另一个输入
- .text() 给出元素中的所有文本元素
- 在函数内调用对象文本元素
- 移动文本元素与弧拉斐尔JS
- 编辑文本元素时,将重置后端用户设置