SVG Referencing

The problem

<mask id="a">...</mask>
<path mask="url(#a)"/>

If we mash-up content…

<mask id="a">...</mask>
<path mask="url(#a)"/>

<mask id="a">...</mask>
<path mask="url(#a)"/>

What you really want…

<mask id="b0d47c5c-b0cb-4542-8fdd-e8ba4919a35d"></mask>
<path mask="url(#b0d47c5c-b0cb-4542-8fdd-e8ba4919a35d)"/>

<mask id="7fd2bc84-afb5-42be-8952-8c8a5797960d"></mask>
<path mask="url(#7fd2bc84-afb5-42be-8952-8c8a5797960d)"/>

Bad news…

“The answer”

<path>
  <mask>...</mask>
</path>

But existing content…

<g>
  <mask id="a">...</mask>
  <rect/> <--Masked!-->
</g>
<path mask="url(#a)"/>

child keyword to rescue…

<path mask="child">
  <mask>...</mask>
</path>

If we have two eligible children…

<path mask="child">
  <mask>...</mask>
  <mask>...</mask> <-- winner! -->
</path>

Where else?

<path clip-path="child">
  <clipPath>...</clipPath>
</path>

<path filter="child">
  <filter>...</filter>
</path>

Paint servers

<path fill="child">
  <linearGradient>...</linearGradient>
</path>

What about…

<path fill="child" stroke="child">
  <linearGradient>...</linearGradient>
  <linearGradient>...</linearGradient>
</path>

Proposal A: child(n)

<path fill="child(0)" stroke="child">
  <linearGradient>...</linearGradient>
  <linearGradient>...</linearGradient>
</path>

If we add new paint servers…

<path fill="child(0)">
  <meshGradient>...</meshGradient>
  <linearGradient>...</linearGradient>
</path>

Or even just…

<path fill="child">
  <linearGradient>...</linearGradient>
  <meshGradient>...</meshGradient>
</path>

If we don't want the last child

<path mask="child(0)">
  <mask>...</mask>
  <mask>...</mask>
</path>

Proposal B: child(name)

<path fill="child(a)" stroke="child(b)">
  <linearGradient name="a">...
  </linearGradient>
  <linearGradient name="b">...
  </linearGradient>
</path>

Proposal B: child(name)

<textPath>

<path id="path"/>
<textPath xlink:href="#path">
  ...
</textPath>
<textPath>
  <path d="..." />
</textPath>

and/or:

<textPath path="M23 45...">...
</textPath>

<feImage>

<filter>
  <feImage xlink:href="#smiley"
     x="0" y="0"
     width="100%" height="100%"
     preserveAspectRatio="none"/>
</filter>
<filter>
  <feImage>
    <rect>
  </feImage>
</filter>

Useful?

<g cursor="child, wait">
  <cursor>...</cursor>
</g>

<path marker-start="child">
  <marker>...</marker>
</path>

Summary

Masks / clip-paths in HTML

With the referencing proposal here you'd still need a <mask> element when you use mask="child" but not necessarily elsewhere. So we're ok.

Discussion