SVGを活用すると、可変になっている矩形の端から端にスタイルシートでナナメの線を引くことができます。
リキッドの<table>対戦表でセルに斜線を引く場合などでいかがでしょうか。
See the Pen stretch slash css by webdev (@webdev-jp-net) on CodePen.0
パソコンのブラウザの場合は、ウィンドウ幅を変更して
スマートフォンの場合は画面を回転させて、テーブルのサイズを変更してみてください。
タグ: svg
SVGにwidth,heightを指定していないとIEでbackground-sizeより縮小されるバグ
IE11では、レスポンシブ対応のためwidth,heightを指定していないSVG画像をbackgroundに指定した際
画像がbackground-sizeで指定したサイズよりも小さく表示されてしまうバグがあります。
これを回避するためには、SVGにwidth,heightを指定した上で、CSSのbackground-sizeも指定します。
サンプルソース※IEで表示すると症状が再現します
.pattern {
width: 100vw;
height: 10vw;
background: url('dot.svg');
background-size: 5vw;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"> <circle cx="0" cy="0" r="12"/> <circle cx="30" cy="30" r="12"/> <circle cx="60" cy="60" r="12"/> <circle cx="0" cy="60" r="12"/> <circle cx="60" cy="0" r="12"/> </svg>
<svg xmlns="http://www.w3.org/2000/svg" width="60px" height="60px" viewBox="0 0 60 60"> <circle cx="0" cy="0" r="12"/> <circle cx="30" cy="30" r="12"/> <circle cx="60" cy="60" r="12"/> <circle cx="0" cy="60" r="12"/> <circle cx="60" cy="0" r="12"/> </svg>
SVGをグラデーションで塗りつぶす
Illustratorでグラデーションで塗りつぶしたベクター画像をSVG書き出しすると、
わざわざグラデーション部分をラスタライズ画像として保存しマスキングする構造のSVGを生成してくれます。
せっかくビットマップ画像と決別したかったのにこれでは煮え切らない (笑)
ということでXMLコードだけでfillをグラデーションにする方法を探しました。
IEにも対応 javaScriptでSVGのpathをアニメーション描画
SVGのpathに沿って線が徐々にのびていき描画しているようにみせるアニメーション。
これは、波線を制御するstroke-dashoffsetの値を大きめに設定し0に近づけていくことで実現でき
CSSのアニメーションでも設定できます。
参考：
SVGでアウトラインをカスタマイズしてみよう | Webクリエイターボックス
が!!
IEはver.11(2016年12月現在の最新版)でもこれに対応していないため
何も表示されていない状態で静止してしまいます。
IEでもSVGをアニメーションさせるには、stroke-dashoffsetの値をjavaScriptのループで少しずつ大きくする形で制御します。
See the Pen SVG path drewing by webdev (@webdev-jp-net) on CodePen.0
Adobe Illustratorで大量のSVGサムネールを書き出す
画像化された文字の見出し、カード型のサムネールや、かるたなど
同フォーマットで文字違いのSVG画像をIllustratorで大量に書き出す場合のコツを紹介します。
基本的には、SVG保存で選べる「アートボードごとに作成」での一斉出力なのですが
アートボードパレットの機能も活用すると、画像を複製してたくさん作る作業もかなり楽になることがわかったので、そちらのほうも紹介します。
サンプルとして、この47都道府県のカードを作ってみました。
コツをつかめば、だいたい20分で作ることができます。
画像ファイルなしCSSだけでSVGを表示
スタイルシートだけでSVG画像を表示する方法です。
画像ファイルを読み込んで表示するのではなく、SVGのコードをBase64でエンコードしてソースに直接埋め込みます。
古いブラウザでは表示できませんので、ご注意を。
- × InternetExplorer 8 以下
- × Android 2.3 以下
メリットは、ページ読み込み時のリクエストを減らせること
デメリットは、一見なんの画像を貼り込んでいるのかわからないので、うまく管理しないとカオス化すること…です。
実際のコードはこのようになります。
当ブログの開発環境アイコンに使っているパソコンが表示されています。
<div class="sample"> </div>
.sample:after {
content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPg0KPHBhdGggZD0iTTMwLDJIMkMwLjg5NiwyLDAsMi44OTYsMCw0djE4YzAsMS4xMDQsMC44OTYsMiwyLDJoMTEuMTk4bC0xLjIxLDRINi45ODRsLTAuNCwyaDE4LjgzbC0wLjM5OC0yaC01LjAwNGwtMS4yMS00SDMwDQoJYzEuMTA0LDAsMi0wLjg5NiwyLTJWNEMzMiwyLjg5NiwzMS4xMDQsMiwzMCwyeiBNMjkuNCwyMEgyLjZWNC42aDI2LjhWMjB6Ii8+DQo8L3N2Zz4=');
}