score:2
Accepted answer
this is indeed a chrome bug. if you reverse the order of <defs>
and the <path>
element, then it works. this is basically the same issue as with the <use>
element.
score:5
a workaround which i've made work adds an extra moveto
command to the beginning of the d
attribute:
<path clip-path="url(#clip)" d="m -10,-10 m 0,100 h 1000 v 100" style="stroke: #000; stroke-width: 2px"></path>
the extra moveto
has no visible effect but means that the path
is not technically straight. it is visible and clipped correctly in chrome.
Source: stackoverflow.com
Related Query
- SVG straight path with clip-path not visible in Chrome
- SVG textPath not visible after transition on Chrome
- How can I apply a clipPath in SVG with multiple paths and NOT clip out the area between the paths?
- D3 SVG path is not filling with linear scale gradient
- d3js svg not visible in chrome
- Calculate SVG Path Centroid with D3.js
- How to select a d3 svg path with a particular ID
- internet explorer 10 not showing svg path (d3.js graph)
- How to update an svg path with d3.js
- d3.on("mouseover") event does not work with nested SVG elements
- C3.js SVG visualization to Canvas with canvg - Line charts filled with black rectangles , "ERROR: Element 'parsererror' not yet implemented"
- Why are programmatically inserted SVG <tspan> elements not drawn, except with d3.js?
- Elements appended to SVG with D3 are not appearing
- D3: "SVG4601: SVG Path data has incorrect format and could not be completely parsed."
- D3.js IE vs Chrome SVG not showing
- With D3, how can I set attribute ("fill", "none") of axis path and line, but not text (without editing stylesheet)
- Using Bootstrap Tooltip with SVG Object - Not Displaying Despite specifying Container
- SVG not drawn outside the visible area of Google Maps
- d3 multiline update path and transition path does not work with nested data
- How to get projected path definition strings (not SVG elements) from a GeoJSON dataset with D3?
- Element rotation with point-along-path interpolation - not possible on path with arc?
- Positioning svg x/y coordinates with css not working with iOS devices?
- How to fix unwanted circle on / break down of SVG path element for Sankey links with d3?
- d3.js - draw ellipse shape with 4 points by svg path
- d3.js : re-inserting elements during dragstart/mousedown interferes with click events in Chrome and Safari but not Firefox
- Backward direction of path with arrow is not showing properly in D3.js V5
- Displaying SVG elements with D3 and d3.slider: Uncaught TypeError: .exit is not a function
- Linear gradient not applying in Webkit with d3 generated SVG
- Marker don't orient properly at the end of SVG path with D3
- zoom/pan with d3.js and svg not working
More Query from same tag
- 3rd Party Library with Angular 2, D3 and Vizuly
- d3js multiple networks issue
- d3 - Create new element from the dataset for each node in the selection
- Zoomable D3 Angular Treemap Directive
- D3 Millisecond tick interval issue
- D3.js line chart highest y axis smaller than highest line
- D3 Zoomable choropleth map
- Drop down from AngularJS Script affecting other d3 charts on Servicenow
- Nested SVG selections in D3
- Using D3 requests (json) over SSL with path url gives Mixed Content error?
- handling dynamic data of large or small size in div of fixed width
- SVG line out of arc starting position - d3.js
- Text inside Bar of the Grouped Bar Chart D3.js
- D3.js zoom with Ordinal axis not working - Issue with setup of scale in zoom behavior?
- Content of d3.js chart overflows margins when using brush
- d3.js change multiple domains in loop, then change attributes
- multiple lines d3
- Adding page breaks to d3 visualization based on group id
- Need some help on D3 pie layout adding line to label
- d3.js - Truncate node text for specified node d.type
- D3.js X axis as index number
- CSS: select a class whose name has a space?
- Mouseover event not triggered when data updated in Chrome
- How to convert the large bio-format file to database-like file that can be asynchronously accessed width JavaScript
- How to show No Data available on load function of c3 JS chart
- D3 add graticule and geojson
- d3pie.js formatted value displaying
- Visual Studio 2015 Import d3 Cannot Find Module 'd3'
- load json file in nodejs/express app into d3
- d3 x-axis with one incorrect value