refactor: use CSS path() to replace svg <clipPath>

Author: weizhenye

README.md

@@ -128,8 +128,8 @@ ASS.js uses many Web APIs to render subtitles, some features will be disabled if
 
 | Feature | Web API | Chrome | Firefox | Safari |
 | - | - | - | - | - |
-| `\[i]clip` | [clip-path](https://caniuse.com/css-clip-path) | 55 | 54 | 13.1 |
 | Auto resize | [ResizeObserver](https://caniuse.com/resizeobserver) | 64 | 69 | 13.1 |
+| `\[i]clip` | [clip-path](https://caniuse.com/css-clip-path) and [path()](https://caniuse.com/mdn-css_types_basic-shape_path) | 88 | 97 | 13.1 |
 | Animations (`\t`) | [registerProperty()](https://caniuse.com/mdn-api_css_registerproperty_static) | 78 | 128 | 16.4 |
 | `\q0` | [text-wrap: balance](https://caniuse.com/css-text-wrap-balance) | 114 | 121 | 17.5 |
 | BorderStyle=3 with `\bord0` | [@container](https://caniuse.com/mdn-css_at-rules_container_style_queries_for_custom_properties) | 111 | - | 18.0 |

src/index.js

@@ -3,7 +3,7 @@ import { compile } from 'ass-compiler';
 import { setKeyframes } from './renderer/animation.js';
 import { $fixFontSize } from './renderer/font-size.js';
 import { clear, createResize, createPlay, createPause, createSeek } from './internal.js';
-import { createSVGEl, addGlobalStyle, uuid } from './utils.js';
+import { addGlobalStyle } from './utils.js';
 
 /**
  * @typedef {Object} ASSOption
@@ -26,10 +26,6 @@ export default class ASS {
     video: null,
     /** the box to display subtitles */
     box: document.createElement('div'),
-    /** use for \clip */
-    svg: createSVGEl('svg'),
-    /** use for \clip */
-    defs: createSVGEl('defs'),
     /**
      * video resize observer
      * @type {ResizeObserver}
@@ -117,7 +113,6 @@ export default class ASS {
     };
     this.#store.styles = styles;
     this.#store.dialogues = dialogues.map((dia) => Object.assign(dia, {
-      id: `ASS-${uuid()}`,
       align: {
         // 0: left, 1: center, 2: right
         h: (dia.alignment + 2) % 3,
@@ -128,12 +123,7 @@ export default class ASS {
 
     container.append($fixFontSize);
 
-    const { svg, defs, scriptRes, box } = this.#store;
-    svg.setAttributeNS(null, 'viewBox', `0 0 ${scriptRes.width} ${scriptRes.height}`);
-
-    svg.append(defs);
-    container.append(svg);
-
+    const { box } = this.#store;
     box.className = 'ASS-box';
     container.append(box);
 
@@ -168,7 +158,7 @@ export default class ASS {
    * @returns {ASS}
    */
   destroy() {
-    const { video, box, svg, observer } = this.#store;
+    const { video, box, observer } = this.#store;
     this.#pause();
     clear(this.#store);
     video.removeEventListener('play', this.#play);
@@ -178,7 +168,6 @@ export default class ASS {
     video.removeEventListener('seeking', this.#seek);
 
     $fixFontSize.remove();
-    svg.remove();
     box.remove();
     observer.unobserve(this.#store.video);
 

src/internal.js

@@ -79,7 +79,7 @@ export function createPause(store) {
 }
 
 export function createResize(that, store) {
-  const { video, box, svg, layoutRes } = store;
+  const { video, box, layoutRes } = store;
   return function resize() {
     const cw = video.clientWidth;
     const ch = video.clientHeight;
@@ -109,11 +109,9 @@ export function createResize(that, store) {
     store.height = bh;
     store.resampledRes = { width: rw, height: rh };
 
-    const cssText = `width:${bw}px;height:${bh}px;top:${(ch - bh) / 2}px;left:${(cw - bw) / 2}px;`;
-    box.style.cssText = cssText;
+    box.style.cssText = `width:${bw}px;height:${bh}px;top:${(ch - bh) / 2}px;left:${(cw - bw) / 2}px;`;
     box.style.setProperty('--ass-scale', store.scale);
     box.style.setProperty('--ass-scale-stroke', store.sbas ? store.scale : 1);
-    svg.style.cssText = cssText;
 
     createSeek(store)();
   };

src/renderer/clip.js

@@ -1,6 +1,5 @@
-import { createSVGEl } from '../utils.js';
-
 export function createRectClip(clip, sw, sh) {
+  if (!clip.dots) return '';
   const { x1, y1, x2, y2 } = clip.dots;
   const polygon = [[x1, y1], [x1, y2], [x2, y2], [x2, y1], [x1, y1]]
     .map(([x, y]) => [x / sw, y / sh])
@@ -10,38 +9,29 @@ export function createRectClip(clip, sw, sh) {
   return `polygon(evenodd, ${polygon})`;
 }
 
-function addClipPath($defs, clip, id, sw, sh) {
-  if (!clip.drawing || $defs.querySelector(`#${id}`)) return;
+function createPathClip(clip, sw, sh, store) {
+  if (!clip.drawing) return '';
+  const scale = store.scale / (1 << (clip.scale - 1));
   let d = clip.drawing.instructions.map(({ type, points }) => (
-    type + points.map(({ x, y }) => `${x / sw},${y / sh}`).join(',')
+    type + points.map(({ x, y }) => `${x * scale},${y * scale}`).join(',')
   )).join('');
-  const scale = 1 / (1 << (clip.scale - 1));
   if (clip.inverse) {
-    d += `M0,0L0,${scale},${scale},${scale},${scale},0,0,0Z`;
+    d += `M0,0L0,${sh},${sw},${sh},${sw},0,0,0Z`;
   }
-  const $clipPath = createSVGEl('clipPath', [
-    ['id', id],
-    ['clipPathUnits', 'objectBoundingBox'],
-  ]);
-  $clipPath.append(createSVGEl('path', [
-    ['d', d],
-    ['transform', `scale(${scale})`],
-    ['clip-rule', 'evenodd'],
-  ]));
-  $defs.append($clipPath);
+  return `path(evenodd, "${d}")`;
 }
 
 export function getClipPath(dialogue, store) {
-  const { id, clip } = dialogue;
+  const { clip } = dialogue;
   if (!clip) return {};
   const { width, height } = store.scriptRes;
-  addClipPath(store.defs, clip, id, width, height);
   const $clipArea = document.createElement('div');
   store.box.insertBefore($clipArea, dialogue.$div);
   $clipArea.append(dialogue.$div);
   $clipArea.className = 'ASS-clip-area';
   $clipArea.style.clipPath = clip.dots
     ? createRectClip(clip, width, height)
-    : `url(#${id})`;
+    : createPathClip(clip, width, height, store);
+
   return { $div: $clipArea };
 }