Calculating SVG Gradient Coordinates for Angled Repeating Lines -

-

i'm trying generate parallelogram in svg repeating lines along same angle left , right sides of polygon. this:

parallelogram

i got repeating gradient work, can't angle of lines right. they're skewed angle of bounding parallelogram:

gradient

i know can manipulate angle based on (x1, y1) / (x2, y2) attributes of gradient, playing numbers isn't doing me. how can calculate values use these attributes given known angle?

here's svg code have right now:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"     viewbox="0 0 1680 550" preserveaspectratio="xmidymin">     <defs>         <lineargradient id="stripedgradient" spreadmethod="repeat" x1="0%" x2="1%" y1="0%" y2="1%">             <stop stop-color="yellow" offset="0%" />             <stop stop-color="yellow" offset="15%" />             <stop stop-color="transparent" offset="15%" />             <stop stop-color="transparent" offset="100%" />         </lineargradient>     </defs>     <polygon fill="url(#stripedgradient)" points="0 550, 415 145, 610 145, 195 550" /> </svg>

this angle works out under 45deg (44.301...), value change @ discretion of designer, so...

(i'm new svg, in knew existed, had never written inline svg hand until today.)

one simple approach define gradient horizontal stripe. if use gradientunits="userspaceonuse", can use gradienttransform set angle.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"      viewbox="0 0 750 550" preserveaspectratio="xmidymin">      <defs>          <lineargradient id="stripedgradient" spreadmethod="repeat"                          gradientunits="userspaceonuse"                          x1="0" y1="0" x2="0" y2="20"                          gradienttransform="rotate(-44.301)">              <stop stop-color="red" offset="0%" />              <stop stop-color="red" offset="15%" />              <stop stop-color="transparent" offset="15%" />              <stop stop-color="transparent" offset="100%" />          </lineargradient>      </defs>      <polygon fill="url(#stripedgradient)" points="0 550, 415 145, 610 145, 195 550" />  </svg>


Comments

Post a Comment

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

-
Image
i try , create radar chart using chart.js has various colours each scaleline, or coloured between scalelines. wondering if possible? from: to: i have working graph, though there doesn't seem method change individual scale lines. kind regards leigh you can extend radar chart type this, so chart.types.radar.extend({ name: "radaralt", initialize: function (data) { chart.types.radar.prototype.initialize.apply(this, arguments); var originalscaledraw = this.scale.draw; var ctx = this.chart.ctx; this.scale.draw = function () { var linewidth = this.linewidth; // bypasses line drawing in originalscaledraw this.linewidth = linewidth; originalscaledraw.apply(this, arguments); ctx.linewidth = this.linewidth; var scale = this; // draw chart.helpers.each(scale.ylabels, function (label, index) { // color of ...
Read more

jquery - ReferenceError: CKEDITOR is not defined -

-
may repeated question, solutions provided on net including stackoverflow q-a not resolved issue. ckeditor (4.5.3) integrated in mvc application. ckeditor using on textarea in partial view. same partial view used in create , edit post form. both form having same .chtml page. partial view : <textarea id="description" name="description" class="form-control" >@html.raw(model.description)</textarea> having script: <script type="text/javascript"> ckeditor.replace('description', { filebrowserimageuploadurl: '@url.action("uploadeditorimage", "administrator")', htmlencodeoutput: true }); </script> in .chtml page added : <script src="~/ckeditor/ckeditor.js"></script> generating proper js examined in response. config.js : ckeditor.editorconfig = function( config ) { config.image_previewtext = ckeditor.tools.repeat(' ...
Read more

android - Go back to previous fragment -

-
btw second fragment. appear once press button in first fragment. in fragment, if press button on phone, go previous fragment. need guys. in advance. public class listalldoctorfragment extends fragment { button close; @nullable @override public view oncreateview(layoutinflater inflater, viewgroup container, bundle savedinstancestate) { view view = inflater.inflate(r.layout.listalldoctor, container,false); close = (button) view.findviewbyid(r.id.button); close.setonclicklistener(new view.onclicklistener() { @override public void onclick(view view) { android.app.fragmentmanager fm = getfragmentmanager(); fragmenttransaction ft = fm.begintransaction(); shit f2 = new shit(); ft.add(r.id.content_frame, f2); ft.addtobackstack(null); ft.commit(); } }); return view; } } assuming want g...
Read more