Comments (1)
The argument I made on today's call (which no one objected to) was essentially:
- yes, this could be a useful feature
- but it's not something simple to spec or implement,
- and therefore it should be deferred until after SVG 2 work is complete.
Target fragments (the part after #
in the URL) are currently interpretted based on the document language. HTML has rules (scroll the targetted element into view) that are quite different from SVG.
The SVG rules are based on the assumption that you are viewing a complete SVG document, either in a stand-alone viewer (e.g., browser tab), or embedded in a different document (e.g., HTML <img>
or <object>
). If you use SVG view target fragments (or SVG <view>
elements) with inline SVG in an HTML document, it has no effect.
I like the idea of having more control over <use>
element embeddings, to be able to create a zoomed-in view. However, there are already different rules for <use>
based on what you're embedding: plain graphics, <symbol>
elements, <svg>
elements. For re-using <symbol>
and <svg>
, the width
and height
attributes have an effect, for ordinary graphics they don't, which would need to be factored in.
A more general concern is that overloading the href
attribute with two different target fragments is semantically confusing and would probably be difficult to animate with good performance.
Another way to achieve this goal may be to add a viewBox
attribute to <use>
. Like the width
and height
attributes, it could override the corresponding attribute on re-used <svg>
and <symbol>
elements.
In the meantime, I think a workaround would be to re-use the content (with its original coordinate system) element into a new SVG that has the coordinate system you want:
<svg id="main-image" width="1000" height="1000" viewBox="0 0 1000 1000">
...
</svg>
<svg id="zoomed-detail" viewBox="100 200 20 20" width="100" height="100"
style="overflow: hidden" >
<use xlink:href="#main_image" />
</svg>
Because there are no width
and height
attributes on the <use>
element, the reused content will be drawn as 1000*1000 units starting at (0,0), but it will be scaled and translated to the new coordinate system.
from svgwg.
Related Issues (20)
- The IDL of SVGSVGElement.getElementById does not allow null
- Should SVG's `<image>` element support the `fetchpriority` attribute analogous to HTML's `<img>` element? HOT 1
- Decimal point not allowed according to Path Data ENBF HOT 3
- Enable lazy loading for URLs on use href HOT 1
- Does SVG support Custom elements? HOT 1
- Error about drawto_command in SVG 2.0 path EBNF HOT 2
- What should happen when trying to insert empty strings or separators into SVGStringList
- SVGAElement.prototype.text should be removed HOT 6
- Serialization of transform functions and transform attribute.
- Update UA stylesheet rules to use :any-link instead of :visited or :link HOT 2
- Incorrect description of path horizontal and vertical movement HOT 7
- Publish current status of SVG
- Is the `path()` function allowed for the `d` property? HOT 2
- Can we fix arc interpolation? HOT 4
- Implementing CSS Text Wrapping in SVG HOT 1
- optional
- Arc sweep vs clockwise explanation HOT 1
- incorrect syntax for svg_path in SVG2 draft
- Define path interpolation when relative and absolute segment types are used. HOT 4
- gradient stroke along path direction HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svgwg.