Geek Answers Handbook

Broken link to SVG filter URL when using story API with Ember CLI

I am creating an SVG visualization using D3.js in an Ember-cli application. SVG uses filters and markers, which are accessed through the id attribute:

<svg>
    <defs>
        <filter id="filterId">
            ...
        </filter>
    </defs>
    <g>
        <g class="nodes">
            <circle filter="url(#filterId)" ...></circle>
        </g>
    </g>
</svg>

This works fine on the index page (url :), but fails when switching to other routes (for example: \ otherRoute). It will work on a different route if I change the circle to

<circle filter="url(./otherRoute#filterId)" ...></circle>

But then it splits into an index and all other pages.

I can fix this by manually adding a url to #filterId when creating svg elements on each route or using hash locationType in ember-cli (which uses / # routeUrl instead of / routeUrl), but wondered if there was a general way to automatically refer to the current url, so can I still use the history API?

+4
1

- -URL- API . SVG, :

<svg>
  <clipPath id="clip-path-ember1919">
    <path d="..."></path>
  </clipPath>
  <g clip-path="url(#clip-path-ember1919)">
    <rect ...></rect>
  </g>
</svg>

D3 append:

var emberId = this.$().attr('id');
svg.append('g')
    .attr('clip-path', "url(#clip-path-#{emberId})");

, API , , ( URL), window.location.pathname:

var emberId = this.$().attr('id');
var relPath = 
svg.append('g')
      .attr('clip-path', "url(." + window.location.pathname + "#clip-path-" + emberId + ")");

SVG, , .

<svg>
  <clipPath id="clip-path-ember1919">
    <path d="..."></path>
  </clipPath>
  <g clip-path="url(./path/to/page#clip-path-ember1919)">
    <rect ...></rect>
  </g>
</svg>

: , window.location.pathname URL.

+2

More articles:


All Articles