Tôi đã gặp sự cố với một SVG đã biến mất trên Chrome dành cho Android khi định hướng được thay đổi trong một số trường hợp nhất định. Đoạn mã dưới đây không tái tạo nó, nhưng là thiết lập chúng ta đã có.
body {
font-family: tahoma, sans-serif;
font-size: 12px;
margin: 10px;
}
article {
display: flex;
}
aside {
flex: 0 1 10px;
margin-right: 10px;
min-width: 10px;
position: relative;
}
svg {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.backgroundStop1 {
stop-color: #5bb79e;
}
.backgroundStop2 {
stop-color: #ddcb3f;
}
.backgroundStop3 {
stop-color: #cf6b19;
}
<article>
<aside>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%">
<defs>
<linearGradient id="IndicatorColourPattern" x1="0" x2="0" y1="0" y2="1">
<stop class="backgroundStop1" offset="0%"></stop>
<stop class="backgroundStop2" offset="50%"></stop>
<stop class="backgroundStop3" offset="100%"></stop>
</linearGradient>
</defs>
<rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" fill="url(#IndicatorColourPattern)"></rect>
</svg>
</aside>
<section>
<p>Donec et eros nibh. Nullam porta, elit ut sagittis pulvinar, lacus augue lobortis mauris, sed sollicitudin elit orci non massa. Proin condimentum in nibh sed vestibulum. Donec accumsan fringilla est, porttitor vestibulum dolor ornare id. Sed elementum
urna sollicitudin commodo ultricies. Curabitur tristique orci et ligula interdum, eu condimentum metus eleifend. Nam libero augue, pharetra at maximus in, pellentesque imperdiet orci.</p>
<p>Fusce commodo ullamcorper ullamcorper. Etiam eget pellentesque quam, id sodales erat. Vestibulum risus magna, efficitur sed nisl et, rutrum consectetur odio. Sed at lorem non ligula consequat tempus vel nec risus.</p>
</section>
</article>
Ngày rưỡi sau khi chọc và chọc và không hài lòng với các giải pháp hack được cung cấp ở đây, tôi phát hiện ra rằng vấn đề là do thực tế nó dường như giữ nguyên tố trong bộ nhớ trong khi vẽ một cái mới. Giải pháp là làm cho ID của linearGradient trên SVG là duy nhất, mặc dù nó chỉ được sử dụng một lần trên mỗi trang.
Điều này có thể đạt được bằng nhiều cách khác nhau, nhưng đối với ứng dụng góc cạnh của chúng tôi, chúng tôi đã sử dụng hàm lodash uniqueId để thêm một biến vào phạm vi:
Chỉ thị góc (JS):
scope.indicatorColourPatternId = _.uniqueId('IndicatorColourPattern');
Cập nhật HTML:
Dòng 5: <linearGradient ng-attr-id="{{indicatorColourPatternId}}" x1="0" x2="0" y1="0" y2="1">
Dòng 11: <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" ng-attr-fill="url(#{{indicatorColourPatternId}})"/>
Tôi hy vọng câu trả lời này sẽ cứu người khác một ngày đáng để đập mặt bàn phím của họ.