Tôi đang làm việc với mẫu SVG sử dụng phông chữ tùy chỉnh, để sử dụng mẫu làm hình nền trên trang HTML.Phông chữ tùy chỉnh không hiển thị trong mẫu SVG được sử dụng làm hình nền
Tất cả mọi thứ ám tốt trong Chrome và Safari nhưng nó bắt đầu để có được vui trong Firefox:
- Firefox ám chỉ rằng SVG cùng với các văn bản phông chữ tùy chỉnh tốt khi tôi mở file SVG bản thân (hiện vẫn rất tốt !);
- Tuy nhiên, Firefox không KHÔNG làm cho phông chữ tùy chỉnh nữa khi mà tập tin SVG tương tự được sử dụng làm nền cho một phần tử HTML (!)
Tôi đã dành giờ cố gắng để cô lập vấn đề này và một cặp mắt mới sẽ được chào đón.
Nhấp vào đây để xem minimal demo of the issue.
Đây là những gì tôi đã có trong ngắn hạn:
CSS:
@import url(http://fonts.googleapis.com/css?family=Indie+Flower);
body {
background: url(pattern-google.svg);
}
tập tin SVG:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" height="200" width="200">
<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>
<defs>
<!-- Geometry -->
<g>
<rect id="square" x="0" y="0" width="200" height="200" />
</g>
<!-- Patterns with Text -->
<pattern id="pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse" text-anchor="middle" font-size="20" font-family="Indie Flower, sans-serif" style="font-family: Indie Flower, sans-serif;">
<rect x="00" y="00" width="40" height="40" fill="transparent" />
<text x="00" y="00" fill="#777">S</text>
<text x="40" y="00" fill="#777">S</text>
<text x="20" y="20" fill="#777">S</text>
<text x="00" y="40" fill="#777">S</text>
<text x="40" y="40" fill="#777">S</text>
</pattern>
</defs>
<!-- Graphics -->
<use xlink:href="#square" transform="translate(0, 0)" fill="url(#pattern)"/>
</svg>
HTML riêng của mình không thực sự quan trọng nhưng Tôi đã liên kết nó bên dưới. Tôi đã không tạo ra một jsfiddle cuối cùng bởi vì tôi không thể lưu trữ các tập tin SVG ở đó.
(Bên ngoài bản trình diễn, ứng dụng thực tế ở đây là tôi muốn sử dụng phông chữ tùy chỉnh để hiển thị các ký hiệu phiên âm. (Làm hình nền, để giúp mọi người tìm hiểu chúng). để xuất sang bitmap bất cứ lúc nào tôi thực hiện thay đổi trong thiết kế.)
Cảm ơn sự giúp đỡ.
Kể từ Firefox 46.0.1 (hoặc có thể sớm hơn), sự cố đã biến mất. –