首页 \ 问答 \ SVG在Firefox中无法正确呈现(SVG Not Rendering Correctly in Firefox)

SVG在Firefox中无法正确呈现(SVG Not Rendering Correctly in Firefox)

 我正在为一个项目开发SVG徽标，并且在测试时，徽标在Google Chrome中呈现正常，但在Firefox中无法正常呈现。  
 Google Chrome中的徽标应该是：   
 Firefox中的徽标是：   
 我用于SVG的代码是：  
<svg version="1.1" id="svg-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect id="svg-logo-rectangle" x="3.744" y="47.804" />
    <text id="svg-logo-text-crocker" transform="matrix(1 0 0 1 130 98.3037)">Crocker</text>
    <text id="svg-logo-text-estates" transform="matrix(1 0 0 1 130 163.3037)" font-size="64.9214">Estates</text>
    <text id="svg-logo-text-c" transform="matrix(1 0 0 1 0 118.3037)">C</text>
    <text id="svg-logo-text-e" transform="matrix(1 0 0 1 55 168.3037)">E</text>
    <text id="svg-logo-text-house-finder" transform="matrix(1 0 0 1 131 197.3037)">House Finder</text>
    <g id="svg-logo-house-1">
        <rect x="5.181" y="15.696" width="26.502" height="26.502"/>
        <polygon points="5.181,15.696 18.393,2.696 31.604,15.696    "/>
        <rect class="window" x="7.559" y="18.737" />
        <rect class="window" x="21.684" y="18.737" />
        <rect class="window" x="21.684" y="31.862" />
        <rect class="door" x="8.871" y="36.011" width="4.875" height="6.703"/>
    </g>
    <g id="svg-logo-house-2">
        <rect x="46.493" y="15.696" width="26.502" height="26.502"/>
        <polygon points="46.493,15.696 59.705,2.696 72.916,15.696   "/>
        <rect class="window" x="48.871" y="18.737" />
        <rect class="window" x="62.996" y="18.737" />
        <rect class="window" x="62.996" y="31.862" />
        <rect class="door" x="50.184" y="36.011" width="4.875" height="6.703"/>
    </g>
    <g id="svg-logo-house-3">
        <rect x="87.806" y="15.696" width="26.502" height="26.502"/>
        <polygon points="87.806,15.696 101.018,2.696 114.229,15.696     "/>
        <rect class="window" class="window" x="90.184" y="18.737" width="7.5" height="7.5"/>
        <rect class="window" class="window" x="104.309" y="18.737" width="7.5" height="7.5"/>
        <rect class="window" class="window" x="104.309" y="31.862" width="7.5" height="7.5"/>
        <rect class="door" x="91.496" y="36.011" />
    </g>
</svg>
 
 你知道为什么这不起作用吗？ 

I am developing a SVG logo for a project, and, when testing it, the logo renders fine in Google Chrome, but doesn't render properly in Firefox.  
The logo in Google Chrome, as it should look is:  
And the logo in Firefox is:  
The code I have used for the SVG is: 
<svg version="1.1" id="svg-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect id="svg-logo-rectangle" x="3.744" y="47.804" />
    <text id="svg-logo-text-crocker" transform="matrix(1 0 0 1 130 98.3037)">Crocker</text>
    <text id="svg-logo-text-estates" transform="matrix(1 0 0 1 130 163.3037)" font-size="64.9214">Estates</text>
    <text id="svg-logo-text-c" transform="matrix(1 0 0 1 0 118.3037)">C</text>
    <text id="svg-logo-text-e" transform="matrix(1 0 0 1 55 168.3037)">E</text>
    <text id="svg-logo-text-house-finder" transform="matrix(1 0 0 1 131 197.3037)">House Finder</text>
    <g id="svg-logo-house-1">
        <rect x="5.181" y="15.696" width="26.502" height="26.502"/>
        <polygon points="5.181,15.696 18.393,2.696 31.604,15.696    "/>
        <rect class="window" x="7.559" y="18.737" />
        <rect class="window" x="21.684" y="18.737" />
        <rect class="window" x="21.684" y="31.862" />
        <rect class="door" x="8.871" y="36.011" width="4.875" height="6.703"/>
    </g>
    <g id="svg-logo-house-2">
        <rect x="46.493" y="15.696" width="26.502" height="26.502"/>
        <polygon points="46.493,15.696 59.705,2.696 72.916,15.696   "/>
        <rect class="window" x="48.871" y="18.737" />
        <rect class="window" x="62.996" y="18.737" />
        <rect class="window" x="62.996" y="31.862" />
        <rect class="door" x="50.184" y="36.011" width="4.875" height="6.703"/>
    </g>
    <g id="svg-logo-house-3">
        <rect x="87.806" y="15.696" width="26.502" height="26.502"/>
        <polygon points="87.806,15.696 101.018,2.696 114.229,15.696     "/>
        <rect class="window" class="window" x="90.184" y="18.737" width="7.5" height="7.5"/>
        <rect class="window" class="window" x="104.309" y="18.737" width="7.5" height="7.5"/>
        <rect class="window" class="window" x="104.309" y="31.862" width="7.5" height="7.5"/>
        <rect class="door" x="91.496" y="36.011" />
    </g>
</svg>
 
Do you have any idea why this doesn't work?

原文：https://stackoverflow.com/questions/41590038

更新时间：2021-12-27 16:12

最满意答案

 根据您指出的文章，这就是原因：  
 
  易失性写入比非易失性写入要昂贵得多，因为保证可见性所需的内存防护但通常比锁定获取更便宜。  
  [...]易失性读取很便宜 - 几乎和非易失性读取一样便宜  
 
 当然，这是正确的：无论底层变量是否为易失性，内存围栏操作总是以写入和读取的方式执行。  
 但是，Java中的volatile不仅仅是易失性和非易失性内存读取。 事实上，它本质上与这种区别无关：区别在于并发语义 。  
 考虑这个臭名昭着的例子：  
volatile boolean runningFlag = true;

void run() {
  while (runningFlag) { do work; }
}
 
 如果runningFlag不是volatile ，那么JIT编译器基本上可以重写该代码  
void run() {
   if (runningFlag) while (true) { do work; }
}
 
 不用说，通过读取每次迭代的runningFlag而不是完全读取它所引入的开销比率是巨大的。 

Here's why, according to the article you have indicated: 
 
 Volatile writes are considerably more expensive than nonvolatile writes because of the memory fencing required to guarantee visibility but still generally cheaper than lock acquisition. 
 [...] volatile reads are cheap -- nearly as cheap as nonvolatile reads 
 
And that is, of course, true: memory fence operations are always bound to writing and reads execute the same way regardless of whether the underlying variable is volatile or not. 
However, volatile in Java is about much more than just volatile vs. nonvolatile memory read. In fact, in its essence it has nothing to do with that distinction: the difference is in the concurrent semantics. 
Consider this notorious example: 
volatile boolean runningFlag = true;

void run() {
  while (runningFlag) { do work; }
}
 
If runningFlag wasn't volatile, the JIT compiler could essentially rewrite that code to 
void run() {
   if (runningFlag) while (true) { do work; }
}
 
The ratio of overhead introduced by reading the runningFlag on each iteration against not reading it at all is, needless to say, enormous.

SVG在Firefox中无法正确呈现(SVG Not Rendering Correctly in Firefox)

最满意答案

相关问答

TCP/IP模型是一个________。[2023-10-02]

下列中不属于面向对象的编程语言的是?[2022-05-30]

与Java中的易失性字段和同步块发生关系以及它们对非易失性变量的影响？(Happens-before relationships with volatile fields and synchronized blocks in Java - and their impact on non-volatile variables?)[2023-10-18]

通过非易失性写入增加易失性写入的成本(Increased cost of a volatile write over a nonvolatile write)[2022-04-21]

易失性指针指向非易失性数据(Volatile pointer points to non volatile data)[2022-02-20]

当工作线程非竞争地写入本地或类变量时，是否需要锁定或易失性？(Is lock or volatile required when worker threads write non-competitively to local or class variables?)[2023-05-29]

在Java中，锁定是否确保正确读取和写入非易失性位置的顺序(In Java, does locking ensure correct order of reads and write to nonvolatile locations)[2022-11-15]

多线程一次写入，多次读取需要一个易失性？(Does a multithreaded write-once, read-many need a volatile?)[2023-01-09]

在C＃中读取和写入的易失性与互锁性[重复](Volatile vs Interlocked for reads and writes in C# [duplicate])[2022-06-02]

非易失性对象中的java易失性对象(java volatile objects in non volatile objects)[2021-10-21]

相关文章

最新问答