SVG được liên kết không Antialias trong IE11

Question

Tôi có một SVG của logo của khách hàng cần phải có một bảng màu cho tiêu đề (màu xanh lam) và nghịch đảo của nó ở chân trang (màu trắng trên nền xanh). Để giảm tải, tôi đang sử dụng một phần tử nội tuyến <svg> đơn lẻ với <symbol>, tham chiếu nó ở hai nơi bằng cách sử dụng <svg><use xlink:href="#logo"/></svg> và sau đó tạo kiểu cho mỗi phiên bản một cách thích hợp bằng cách sử dụng CSS.

Cho đến nay, rất tốt. Tôi chỉ phải gọi SVG một lần và có thể tạo phong cách khác nhau ở cả hai nơi mà không gặp bất kỳ vấn đề gì.

Tuy nhiên, sau khi kiểm tra thiết lập này trong IE11, tôi thấy rằng SVG được liên kết trông khủng khiếp. Nó không xuất hiện để được antialiasing, nhưng chỉ trên phiên bản liên kết.

Tôi đã giảm SVG xuống phiên bản đơn giản cho ví dụ này (và để ẩn danh máy khách), nhưng you can see this behavior in a fiddle nếu bạn xem trước trong IE11.

Đây là ảnh chụp màn hình của hành vi trong IE11. Phiên bản bên trái là mã tôi muốn, nhưng bạn có thể thấy sự xuống cấp chất lượng so với nội tuyến SVG đầy đủ ở bên phải.

Có bất kỳ lý do tại sao chỉ IE11 (IE9 và IE10 làm này một cách chính xác) thực hiện điều này? Tôi đã thử đặt shape-rendering="geometricPrecision" và shape-rendering="optimizeQuality" trong cả hai thành phần <svg> và trong phần tử <path> và chất lượng không thay đổi trong IE11.

Tôi thiếu gì ở đây?

Answer 1

Dường như nó hoạt động nếu bạn đặt nguồn ở đầu mã.

Giống như vậy:

<svg style="display:none" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 90.44" xml:space="preserve" version="1.1"> 
<symbol id="logo"> 
    <defs> 
     <clipPath clipPathUnits="userSpaceOnUse"> 
      <path d="m0 67.83 432 0L432 0 0 0 0 67.83Z" /> 
     </clipPath> 
    </defs> 
    <g transform="matrix(1.3333333,0,0,-1.3333333,0,90.436933)"> 
     <g clip-path="url(#clipPath16)"> 
      <g transform="translate(25.9522,0.5186)"> 
       <path d="m0 0c-11.91 4.19-25.95 13.63-25.95 27.69l0 28 2.56 1.2c14.27 6.65 32.15 10.42 47.85 10.42l4.44 0 0-39.62C28.9 13.63 14.86 4.19 2.95 0L1.47-0.52 0 0ZM-21.51 52.86C-10.12 58.17 7.13 62.87 24.46 62.87l0-35.18C24.46 16.11 12.05 7.91 1.47 4.19-9.1 7.91-21.51 16.11-21.51 27.69l0 25.17z" style="fill-rule:evenodd;" /> 
      </g> 
      <g transform="translate(31.1309,54.8155)"> 
       <path d="M0 0C-0.02-0.01-0.05-0.02-0.07-0.03-0.05-0.02-0.02-0.01 0 0" class="s0" /> 
      </g> 
      <g transform="translate(31.2388,54.8624)"> 
       <path d="M0 0C-0.04-0.01-0.07-0.03-0.11-0.05-0.07-0.03-0.04-0.01 0 0" class="s0" /> 
      </g> 
      <g transform="translate(31.0625,54.7837)"> 
       <path d="M0 0C0 0 0 0-0.01 0 0 0 0 0 0 0" class="s0" /> 
      </g> 
     </g> 
    </g> 
</symbol> 
</svg> 

<header> 
<div> 
    <a href="test.html"><svg viewBox="0 0 576 90.44"> 
     <use xlink:href="#logo"/> 
    </svg></a> 
</div> 
<div> 
    <svg viewBox="0 0 576 90.44"> 
     <use xlink:href="#logo"/> 
    </svg> 
</div> 
</header> 

<div class="clear"><!-- --></div> 

<footer> 
    <div> 
    <a href="test.html"><svg viewBox="0 0 576 90.44"> 
     <use xlink:href="#logo"/> 
    </svg></a> 
</div> 
<div> 
    <svg viewBox="0 0 576 90.44"> 
     <use xlink:href="#logo"/> 
    </svg> 
</div> 
</footer>