Replace <img> with inline SVG

w3c · Jun 22, 2023 · 0b367aa · 0b367aa
1 parent 0de2545
commit 0b367aa
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 7 deletions.
diff --git a/content/patterns/feed/examples/css/feedDisplay.css b/content/patterns/feed/examples/css/feedDisplay.css
@@ -79,3 +79,38 @@ body {
   padding: 10px;
   width: 100%;
 }
+
+.restaurant-rating svg g {
+  color: #ffde00;
+}
+
+.restaurant-rating svg .star {
+  stroke-width: 2px;
+  stroke: #f8951d;
+  fill-opacity: 0;
+}
+
+.restaurant-rating[data-rating-value="1"] svg .star-1 .star {
+  fill: currentcolor;
+  fill-opacity: 1;
+}
+
+.restaurant-rating[data-rating-value="2"] svg .star-2 .star {
+  fill: currentcolor;
+  fill-opacity: 1;
+}
+
+.restaurant-rating[data-rating-value="3"] svg .star-3 .star {
+  fill: currentcolor;
+  fill-opacity: 1;
+}
+
+.restaurant-rating[data-rating-value="4"] svg .star-4 .star {
+  fill: currentcolor;
+  fill-opacity: 1;
+}
+
+.restaurant-rating[data-rating-value="5"] svg .star-5 .star {
+  fill: currentcolor;
+  fill-opacity: 1;
+}
diff --git a/content/patterns/feed/examples/js/feedDisplay.js b/content/patterns/feed/examples/js/feedDisplay.js
@@ -211,14 +211,31 @@ aria.FeedDisplay.prototype.renderItemData = function (itemData) {
     itemContent +=
       '<div class="restaurant-rating" id="' +
       ratingID +
-      '">' +
-      '<img class="restaurant-star-img" ' +
-      'alt="' +
-      itemData.rating +
-      ' stars" ' +
-      'src="imgs/rating-' +
+      '" data-rating-value="' +
       itemData.rating +
-      '.png">' +
+      '">' +
+      '<svg role="none" xmlns="http://www.w3.org/2000/svg" viewBox="38 -5 100 48" width="90" height="25">' +
+      '<defs>' +
+      '<g id="star">' +
+      '<polygon points="2.0,13.4 11.7,20.5 8.0,31.1 17.7,24.8 27.4,31.9 23.7,20.5 33.4,13.4 21.4,13.4 17.7,2.0 14.0,13.4" />' +
+      '</g>' +
+      '</defs>' +
+      '<g aria-label="one star" class="star-1 star-2 star-3 star-4 star-5">' +
+      '<use class="star" xlink:href="#star" x="0" y="0" />' +
+      '</g>' +
+      '<g aria-label="two stars" class="star-2 star-3 star-4 star-5">' +
+      '<use class="star" xlink:href="#star" x="35" y="0" />' +
+      '</g>' +
+      '<g aria-label="three stars" class="star-3 star-4 star-5">' +
+      '<use class="star" xlink:href="#star" x="70" y="0" />' +
+      '</g>' +
+      '<g aria-label="four stars" class="star-4 star-5">' +
+      '<use class="star" xlink:href="#star" x="105" y="0" />' +
+      '</g>' +
+      '<g aria-label="five stars" class="star-5">' +
+      '<use class="star" xlink:href="#star" x="140" y="0" />' +
+      '</g>' +
+      '</svg>' +
       '</div>';
     describedbyIDs.push(ratingID);
   }