Add support for ex units (#618)

* feat: add xHeight to SvgTheme * test: add SvgTheme xHeight tests * feat: use xHeight when updating PictureProvider in SvgPicture * test: add xHeight to DefaultSvgTheme and PictureProvider tests * feat: add support for parsing ex units * test: fix existing tests after introducing xHeight * test: add DefaultSvgTheme xHeight tests * test: add parseStyle xHeight tests (stroke width, dash array, dash offset) * test: add SvgParser xHeight tests (svg, use, text, radialGradient, linearGradient, image) * test: add SvgPicture xHeight tests for shapes (circle, rect, ellipse, line) * test: PictureProvider rebuilds a decoder when the theme changes * test: fix relative font size tests * test: add ex font size tests * test: fix DefaultSvgTheme tests * revert: SvgTheme equals operator should use runtimeType
dnfield · Dec 8, 2021 · dc9e644 · dc9e644
1 parent fa5f0c3
commit dc9e644
Show file tree

Hide file tree

Showing 17 changed files with 812 additions and 248 deletions.
diff --git a/lib/src/svg/parser_state.dart b/lib/src/svg/parser_state.dart
diff --git a/lib/src/svg/parsers.dart b/lib/src/svg/parsers.dart
@@ -21,10 +21,12 @@ final Map<String, double> _kTextSizeMap = <String, double>{
 
 /// Parses a `font-size` attribute.
 ///
-/// Uses [fontSize] to calculate the font size including em units.
+/// Uses [fontSize] and [xHeight] to calculate the font size
+/// that includes em or ex units.
 double? parseFontSize(
   String? raw, {
   required double fontSize,
+  required double xHeight,
   double? parentValue,
 }) {
   if (raw == null || raw == '') {
@@ -35,6 +37,7 @@ double? parseFontSize(
     raw,
     tryParse: true,
     fontSize: fontSize,
+    xHeight: xHeight,
   );
   if (ret != null) {
     return ret;

diff --git a/lib/src/svg/theme.dart b/lib/src/svg/theme.dart
@@ -12,7 +12,8 @@ class SvgTheme {
   const SvgTheme({
     this.currentColor,
     this.fontSize = 14,
-  });
+    double? xHeight,
+  }) : xHeight = xHeight ?? fontSize / 2;
 
   /// The default color applied to SVG elements that inherit the color property.
   /// See: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword
@@ -22,16 +23,23 @@ class SvgTheme {
   /// See: https://www.w3.org/TR/SVG11/coords.html#Units
   final double fontSize;
 
+  /// The x-height (corpus size) of the font used when calculating ex units of SVG elements.
+  /// Defaults to [fontSize] / 2 if not provided.
+  /// See: https://www.w3.org/TR/SVG11/coords.html#Units, https://en.wikipedia.org/wiki/X-height
+  final double xHeight;
+
   @override
   bool operator ==(dynamic other) {
     if (other.runtimeType != runtimeType) {
       return false;
     }
+
     return other is SvgTheme &&
         currentColor == other.currentColor &&
-        fontSize == other.fontSize;
+        fontSize == other.fontSize &&
+        xHeight == other.xHeight;
   }
 
   @override
-  int get hashCode => hashValues(currentColor, fontSize);
+  int get hashCode => hashValues(currentColor, fontSize, xHeight);
 }
diff --git a/lib/src/svg/xml_parsers.dart b/lib/src/svg/xml_parsers.dart
@@ -13,6 +13,7 @@ import 'parsers.dart';
 double _parseRawWidthHeight(
   String? raw, {
   required double fontSize,
+  required double xHeight,
 }) {
   if (raw == '100%' || raw == '') {
     return double.infinity;
@@ -21,18 +22,21 @@ double _parseRawWidthHeight(
     final RegExp notDigits = RegExp(r'[^\d\.]');
     if (!raw!.endsWith('px') &&
         !raw.endsWith('em') &&
+        !raw.endsWith('ex') &&
         raw.contains(notDigits)) {
       print(
           'Warning: Flutter SVG only supports the following formats for `width` and `height` on the SVG root:\n'
           '  width="100%"\n'
           '  width="100em"\n'
+          '  width="100ex"\n'
           '  width="100px"\n'
           '  width="100" (where the number will be treated as pixels).\n'
           'The supplied value ($raw) will be discarded and treated as if it had not been specified.');
     }
     return true;
   }());
-  return parseDoubleWithUnits(raw, fontSize: fontSize, tryParse: true) ??
+  return parseDoubleWithUnits(raw,
+          fontSize: fontSize, xHeight: xHeight, tryParse: true) ??
       double.infinity;
 }
 
@@ -46,6 +50,7 @@ double _parseRawWidthHeight(
 DrawableViewport? parseViewBox(
   Map<String, String> svg, {
   required double fontSize,
+  required double xHeight,
   bool nullOk = false,
 }) {
   final String? viewBox = getAttribute(svg, 'viewBox');
@@ -64,15 +69,11 @@ DrawableViewport? parseViewBox(
         '  $svg');
   }
 
-  final double width = _parseRawWidthHeight(
-    rawWidth,
-    fontSize: fontSize,
-  );
+  final double width =
+      _parseRawWidthHeight(rawWidth, fontSize: fontSize, xHeight: xHeight);
 
-  final double height = _parseRawWidthHeight(
-    rawHeight,
-    fontSize: fontSize,
-  );
+  final double height =
+      _parseRawWidthHeight(rawHeight, fontSize: fontSize, xHeight: xHeight);
 
   if (viewBox == '') {
     return DrawableViewport(
@@ -128,6 +129,7 @@ TileMode parseTileMode(Map<String, String> attributes) {
 CircularIntervalList<double>? parseDashArray(
   Map<String, String> attributes, {
   required double fontSize,
+  required double xHeight,
 }) {
   final String? rawDashArray = getAttribute(attributes, 'stroke-dasharray');
   if (rawDashArray == '') {
@@ -138,14 +140,16 @@ CircularIntervalList<double>? parseDashArray(
 
   final List<String> parts = rawDashArray!.split(RegExp(r'[ ,]+'));
   return CircularIntervalList<double>(parts
-      .map((String part) => parseDoubleWithUnits(part, fontSize: fontSize)!)
+      .map((String part) =>
+          parseDoubleWithUnits(part, fontSize: fontSize, xHeight: xHeight)!)
       .toList());
 }
 
 /// Parses a @stroke-dashoffset into a [DashOffset].
 DashOffset? parseDashOffset(
   Map<String, String> attributes, {
   required double fontSize,
+  required double xHeight,
 }) {
   final String? rawDashOffset = getAttribute(attributes, 'stroke-dashoffset');
   if (rawDashOffset == '') {
@@ -158,6 +162,7 @@ DashOffset? parseDashOffset(
     return DashOffset.absolute(parseDoubleWithUnits(
       rawDashOffset,
       fontSize: fontSize,
+      xHeight: xHeight,
     )!);
   }
 }
@@ -200,6 +205,7 @@ DrawablePaint? parseStroke(
   DrawablePaint? parentStroke,
   Color? currentColor,
   double fontSize,
+  double xHeight,
 ) {
   final String rawStroke = getAttribute(attributes, 'stroke')!;
   final String? rawStrokeOpacity = getAttribute(
@@ -264,6 +270,7 @@ DrawablePaint? parseStroke(
         : parseDoubleWithUnits(
             rawStrokeWidth,
             fontSize: fontSize,
+            xHeight: xHeight,
           ),
   );
   return paint;
@@ -499,6 +506,7 @@ DrawableStyle parseStyle(
   Rect? bounds,
   DrawableStyle? parentStyle, {
   required double fontSize,
+  required double xHeight,
   Color? defaultFillColor,
   Color? currentColor,
 }) {
@@ -512,14 +520,17 @@ DrawableStyle parseStyle(
       parentStyle?.stroke,
       currentColor,
       fontSize,
+      xHeight,
     ),
     dashArray: parseDashArray(
       attributes,
       fontSize: fontSize,
+      xHeight: xHeight,
     ),
     dashOffset: parseDashOffset(
       attributes,
       fontSize: fontSize,
+      xHeight: xHeight,
     ),
     fill: parseFill(
       key,
@@ -544,6 +555,7 @@ DrawableStyle parseStyle(
         getAttribute(attributes, 'font-size'),
         parentValue: parentStyle?.textStyle?.fontSize,
         fontSize: fontSize,
+        xHeight: xHeight,
       ),
       fontWeight: parseFontWeight(
         getAttribute(attributes, 'font-weight', def: null),

diff --git a/lib/src/utilities/numbers.dart b/lib/src/utilities/numbers.dart
@@ -1,6 +1,6 @@
 /// Parses a [rawDouble] `String` to a `double`.
 ///
-/// The [rawDouble] might include a unit (`px` or `em`)
+/// The [rawDouble] might include a unit (`px`, `em` or `ex`)
 /// which is stripped off when parsed to a `double`.
 ///
 /// Passing `null` will return `null`.
@@ -10,7 +10,11 @@ double? parseDouble(String? rawDouble, {bool tryParse = false}) {
     return null;
   }
 
-  rawDouble = rawDouble.replaceFirst('em', '').replaceFirst('px', '').trim();
+  rawDouble = rawDouble
+      .replaceFirst('em', '')
+      .replaceFirst('ex', '')
+      .replaceFirst('px', '')
+      .trim();
 
   if (tryParse) {
     return double.tryParse(rawDouble);
@@ -20,19 +24,24 @@ double? parseDouble(String? rawDouble, {bool tryParse = false}) {
 
 /// Parses a [rawDouble] `String` to a `double`
 /// taking into account absolute and relative units
-/// (`px` or `em`).
+/// (`px`, `em` or `ex`).
 ///
 /// Passing an `em` value will calculate the result
 /// relative to the provided [fontSize]:
 /// 1 em = 1 * [fontSize].
 ///
+/// Passing an `ex` value will calculate the result
+/// relative to the provided [xHeight]:
+/// 1 ex = 1 * [xHeight].
+///
 /// The [rawDouble] might include a unit which is
 /// stripped off when parsed to a `double`.
 ///
 /// Passing `null` will return `null`.
 double? parseDoubleWithUnits(
   String? rawDouble, {
   required double fontSize,
+  required double xHeight,
   bool tryParse = false,
 }) {
   double unit = 1.0;
@@ -41,6 +50,10 @@ double? parseDoubleWithUnits(
   if (rawDouble?.contains('em') ?? false) {
     unit = fontSize;
   }
+  // 1 ex unit is equal to the current x-height.
+  else if (rawDouble?.contains('ex') ?? false) {
+    unit = xHeight;
+  }
 
   final double? value = parseDouble(
     rawDouble,

diff --git a/lib/svg.dart b/lib/svg.dart
@@ -787,9 +787,15 @@ class _SvgPictureState extends State<SvgPicture> {
         // See: https://api.flutter.dev/flutter/painting/TextStyle/fontSize.html
         14.0;
 
+    final double xHeight = widget.theme?.xHeight ??
+        defaultSvgTheme?.xHeight ??
+        // Fallback to the font size divided by 2.
+        fontSize / 2;
+
     widget.pictureProvider.theme = SvgTheme(
       currentColor: currentColor,
       fontSize: fontSize,
+      xHeight: xHeight,
     );
   }
 

diff --git a/test/default_theme_test.dart b/test/default_theme_test.dart
@@ -12,6 +12,7 @@ void main() {
       const SvgTheme svgTheme = SvgTheme(
         currentColor: Color(0xFF733821),
         fontSize: 14.0,
+        xHeight: 6.0,
       );
 
       final SvgPicture svgPictureWidget = SvgPicture.string('''
@@ -34,6 +35,7 @@ void main() {
       const SvgTheme anotherSvgTheme = SvgTheme(
         currentColor: Color(0xFF05290E),
         fontSize: 12.0,
+        xHeight: 7.0,
       );
 
       await tester.pumpWidget(DefaultSvgTheme(
@@ -157,5 +159,58 @@ void main() {
         equals(14.0),
       );
     });
+
+    testWidgets(
+        'xHeight from the widget\'s theme takes precedence over '
+        'the theme from DefaultSvgTheme', (WidgetTester tester) async {
+      const SvgTheme svgTheme = SvgTheme(
+        fontSize: 14.0,
+        xHeight: 6.5,
+      );
+
+      final SvgPicture svgPictureWidget = SvgPicture.string(
+        '''
+<svg viewBox="0 0 10 10">
+  <rect x="0" y="0" width="10ex" height="10ex" />
+</svg>''',
+        theme: SvgTheme(
+          fontSize: 12.0,
+          xHeight: 7.0,
+        ),
+      );
+
+      await tester.pumpWidget(DefaultSvgTheme(
+        theme: svgTheme,
+        child: svgPictureWidget,
+      ));
+
+      final SvgPicture svgPicture = tester.firstWidget(find.byType(SvgPicture));
+      expect(svgPicture, isNotNull);
+      expect(
+        svgPicture.pictureProvider.theme.xHeight,
+        equals(7.0),
+      );
+    });
+
+    testWidgets(
+        'xHeight defaults to the font size divided by 2 (7.0) '
+        'if no widget\'s theme or DefaultSvgTheme is provided',
+        (WidgetTester tester) async {
+      final SvgPicture svgPictureWidget = SvgPicture.string(
+        '''
+<svg viewBox="0 0 10 10">
+  <rect x="0" y="0" width="10ex" height="10ex" />
+</svg>''',
+      );
+
+      await tester.pumpWidget(svgPictureWidget);
+
+      final SvgPicture svgPicture = tester.firstWidget(find.byType(SvgPicture));
+      expect(svgPicture, isNotNull);
+      expect(
+        svgPicture.pictureProvider.theme.xHeight,
+        equals(7.0),
+      );
+    });
   });
 }
diff --git a/test/golden_widget/circle.em.png → test/golden_widget/circle.em_ex.png b/test/golden_widget/circle.em.png → test/golden_widget/circle.em_ex.png
diff --git a/test/golden_widget/ellipse.em.png → test/golden_widget/ellipse.em_ex.png b/test/golden_widget/ellipse.em.png → test/golden_widget/ellipse.em_ex.png
diff --git a/test/golden_widget/line.em.png → test/golden_widget/line.em_ex.png b/test/golden_widget/line.em.png → test/golden_widget/line.em_ex.png
diff --git a/test/golden_widget/rect.em.png → test/golden_widget/rect.em_ex.png b/test/golden_widget/rect.em.png → test/golden_widget/rect.em_ex.png
diff --git a/test/picture_cache_test.dart b/test/picture_cache_test.dart
@@ -80,6 +80,7 @@ void main() {
       svgString,
     )..theme = const SvgTheme(
         fontSize: 14.0,
+        xHeight: 7.0,
       );
 
     await precachePicture(