神仙姐姐的變裝秀-photoshop,SVG綜合藝術小賞

     劉亦菲做爲中國真美女的表明，由於360無死角的美貌深受中國沒有對象卻要面向對象編程的程序猿的喜好，今天就借神仙姐姐的一張照片展現下SVG的變裝藝術。

俗話說：開篇一張圖，內容全靠編，咱們就從這張照片開始，而後開始編（程序）。若是性急的朋友想先看到最終效果，翻到最後，能夠看到在線演示的地址。

一、找衣服

想要變裝，首先就要找到衣服在哪，這個須要先請出PHOTOSHOP。啥，你不會PS？告訴你吼，不會ps的前端不是好的單身漢，你怎麼好意思說這個話。咱們先用ps打開上面這張圖，選擇魔棒工具，

把照片中的白色衣服部門都加入選區，就像這樣

而後在虛線的選區裏面用鼠標右鍵選擇「創建工做路徑」，把選區保存成工做路徑。這裏須要注意一點，創建工做路徑的時候，不要把容差像素選的過小（最小是0.5像素），不然路徑展示出來的區域鋸齒會很明顯。

而後把工做路徑導出到AI文件

咱們就獲得了一個.ai的文件，這個文件就是矢量的文件路徑。

二、生成svg文件

剛纔咱們獲得了一個.ai的文件，這個後綴的文件能夠被adobe illustrator打開，咱們打開adobe illustrator....

憤怒的羣衆：剛纔你讓我打開ps也就算了，ps用的也還算多，幫女友P圖的時候也用過，說到女友，她的大腿拉長，真難搞....,扯遠了，illustrator是個什麼鬼玩意

我：adobe illustrator是一款矢量插圖軟件....

憤怒的羣衆：它能幫女友p膚色身材嗎?

我：不能夠，不過它是矢量圖，和SVG格式同樣能夠無損縮放....

憤怒的羣衆：那不學，有沒有其餘辦法，不然我不學了，adobe的東西難得了。

我：便宜有便宜的作法，咱們用簡單的方法搞定。

若是用illustrator能夠直接把.ai文件打開並轉成svg文件，但就爲了轉個格式，弄一個illustrator不划算，好在互聯網啥都有，你們能夠在這個網站作格式的轉換，AI到SVG轉換器，不用註冊，直接轉換，咱們就獲取到了神仙姐姐衣服區域的svg文件了。

三、開始編碼第一步，照片和svg文件

終於到了編碼的部分了，讓咱們看下代碼：

<div id="container">

        <svg id="product-svg" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="640px"
            height="1136px" version="1.1"
            style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
            viewBox="0 -293 640 1136" xmlns:xlink="http://www.w3.org/1999/xlink">
            
            <g id="product-shape" >
                <path 
                    d="M 435 356.89C 444.608 357.009 447.67 362.091 454 364.89C 461.682 368.287 473.02 368.768 481 370.89C 482.418 383.019 489.684 392.964 494 402.89C 500.37 403.326 503.811 406.524 509 407.89C 515.069 409.487 519.959 407.72 525 409.89C 548.365 419.945 568.115 438.788 592 447.89C 604.079 452.493 616.042 456.089 627 460.89C 630.151 462.27 638.446 463.196 640 465.89C 640 591.211 640 716.569 640 841.89C 564.674 841.89 489.326 841.89 414 841.89C 411.278 830.633 401.78 824.183 398 814.89C 397.667 809.224 397.333 803.556 397 797.89C 393.842 784.161 393.461 769.681 387 758.89C 383.252 752.631 378.415 746.741 374 740.89C 370.215 735.872 361.228 732.021 359 725.89C 356.486 718.973 358.598 707.994 356 700.89C 350.984 687.175 342.72 675.935 337 663.89C 336.333 656.224 335.667 648.556 335 640.89C 332.189 630.358 326.916 610.397 322 600.89C 320.603 598.189 316.382 595.464 315 592.89C 315 591.557 315 590.223 315 588.89C 312.667 586.89 310.333 584.89 308 582.89C 307.667 576.89 307.333 570.889 307 564.89C 304.647 554.913 303.802 542.039 300 532.89C 295.442 521.921 286.33 510.813 279 501.89C 277.667 501.223 276.333 500.556 275 499.89C 269.871 492.59 272.501 478.438 270 468.89C 266.482 455.459 260.206 446.315 260 429.89C 261.516 429.354 261.693 429.215 264 428.89C 268.035 433.759 274.524 436.435 279 440.89C 285.562 447.42 292.165 454.709 300 459.89C 306.819 464.399 314.496 466.153 321 470.89C 332.781 479.47 343.161 490.077 355 498.89C 363.965 505.564 369.23 516.914 377 524.89C 384.12 532.199 391.977 538.433 400 544.89C 400.333 545.89 400.667 546.89 401 547.89C 405.792 552.398 412.614 555.027 417 559.89C 424.432 568.13 430.565 579.904 441 584.89C 441 584.223 441 583.556 441 582.89C 448.136 572.212 446.877 550.928 451 536.89C 452.334 532.348 455.39 526.209 457 521.89C 457.333 519.557 457.667 517.223 458 514.89C 458.649 513.395 461.403 512.401 462 510.89C 465.217 502.738 464.197 493.538 467 484.89C 470.464 474.2 477.422 464.946 478 450.89C 459.601 437.429 476.984 418.678 479 403.89C 459.681 393.116 436.043 385.84 435 356.89z" />
                <path 
                    d="M 149 399.89C 148.462 407.57 144.433 418.001 147 426.89C 149.516 435.601 149.026 443.839 149 454.89C 151.933 456.364 152.223 455.971 153 459.89C 149.931 463 157.052 484.766 166 484.89C 164.314 496.205 170.063 493.683 173 502.89C 173.333 507.223 173.667 511.557 174 515.89C 177.507 529.877 177.79 546.883 184 558.89C 188.074 566.767 196.978 572.826 201 580.89C 201 584.223 201 587.557 201 590.89C 202.299 596.322 202.56 603.967 205 609.89C 208.41 618.168 215.046 625.957 219 633.89C 222.92 641.756 224.579 655.913 226 662.89C 227.9 672.218 223.996 679.582 226 687.89C 229.887 704.004 243.78 736.285 258 739.89C 257.043 753.447 265.829 765.444 268 779.89C 270.076 780.262 269.924 780.132 271 780.89C 275.347 786.936 276.564 794.806 281 800.89C 290.538 813.969 303.303 819.161 304 841.89C 202.677 841.89 101.323 841.89 0 841.89C 0 728.901 0 615.878 0 502.89C 21.4317 490.348 41.4014 474.965 61 460.89C 68.3359 455.621 76.9492 451.393 83 444.89C 87.7162 439.821 98.6967 421.282 104 418.89C 108.333 418.89 112.667 418.89 117 418.89C 119.698 416.749 124.022 416.879 127 414.89C 133.933 410.258 135.018 399.376 146 398.89C 147.073 399.641 146.946 399.491 149 399.89z" />

            </g>
        </svg>
        <img id="background-image"
            src="https://hbimg.huabanimg.com/f27eb7a381ad10ae51e161367538116e0a417effdea0d-hzE4Zg_fw658" alt="">
    </div>複製代碼

中間一大坨的代碼就是轉換成的svg文件裏面的內容，包括了兩個path，細心的朋友若是仔細觀察過照片，就能看到辮子把衣服分割成了兩個獨立的部分，因此會有兩個path（啥，都只關注神仙姐姐的臉去了，其餘地方沒顧上）。下面就是神仙姐姐的那張照片了，用的是img標籤，就不詳述了。

四、CSS來一個

CSS的核心有兩個做用，一是怎麼把svg路徑疊加在照片上面，讓咱們看下面這段

#product-svg {
  position: relative;
  z-index: 2;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  mix-blend-mode: multiply;
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#background-image {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
複製代碼

經過z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素老是會處於堆疊順序較低的元素的前面。這樣，svg就堆疊在了圖片的上面。

mix-blend-mode是這篇文章真正的核心，它是一種混合模式，能夠做用於自身和堆疊順序低於本身的圖形（包括文字、圖片和SVG圖形等），咱們這邊用的是multiply，中文名稱叫正片疊加。這裏咱們就可以把svg文件裏面的內容疊加到圖片上，用來改變圖片選區的樣子，但它不是覆蓋，因此咱們仍然能看到下面圖片的樣子。這個具體的解釋能夠看這裏，講的很詳細。

CSS另一個做用比較簡單，就是給svg選區添加顏色

#product-shape {
  fill: #DBED64;
}複製代碼

這樣，神仙姐姐的身上就再也不是白衣服了，而是黃顏色。但如今圖片和svg選區並無疊在一塊兒，這須要咱們作一些調整，把圖片和svg紋絲合縫的疊加在一塊兒。

五、圖片和svg文件位置疊加的調整

讓咱們先看代碼：

// Reference the color shape that was drawn over the image
const overlay = document.getElementById("product-shape");

// This function simulates background-size: cover for the SVG inside its parent div, so it would likely be helpful for people migrating from using images to using an SVG locked onto with a photo.

// Reference the SVG
const svg = document.getElementById("product-svg");

// Reference the image
const img = document.getElementById("background-image");

// Place the SVG inside a parent div, reference it
const container = document.getElementById("container");

// (On resize)
window.onresize = () => simulateCover(container, svg, img, 640, 1136);

// (On load)
simulateCover(container, svg, img, 640, 1136);

// Pass the parent div, and the SVG (child)
// Pass the image
// x and y are the native dimensions of the image
function simulateCover(parent, child, image, x, y) {
  let { width, height } = parent.getBoundingClientRect();
  let yPercentage = x / y;
  let xPercentage = y / x;

  if (width < height * yPercentage) {
    child.style.width = height * yPercentage + "px";
    child.style.height = height + "px";
    
    image.style.width = height * yPercentage + "px";
    image.style.height = height + "px";

  } else {
    child.style.width = width + "px";
    child.style.height = width * xPercentage + "px";
    
    image.style.width = width + "px";
    image.style.height = width * xPercentage + "px";
    
    
  }
}複製代碼

這段的核心是simulateCover函數，數字640和1136是圖片的寬度和高度。經過對child（就是svg區域）和image（圖片）的位置的計算，把二者重疊在一塊兒，主要是把寬度統一，高度我經過SVG自己的屬性來控制，主要是下面這一句

<svg id="product-svg" viewBox="0 -293 640 1136">複製代碼

這裏我把SVG畫布（viewBox）的高度和寬度調整的和圖片同樣，但SVG區域其實沒有那麼高，因此經過viewBox的第二個參數-293把svg區域往下挪，和圖片中衣服的部分重疊就行了。viewBox四個參數分別表明的意思是最小X軸數值/最小y軸數值/寬度/高度。

六、選顏色

最後，咱們使用一個顏色選擇器選顏色，而後把顏色賦給svg區域，咱們就可以隨心因此的給神仙姐姐的衣服變換顏色了。

<input class="jscolor {onFineChange:'changeColor(this)'}" value="DBED64">
    <!-- partial -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js'></script>複製代碼

// Reference the color shape that was drawn over the image
const overlay = document.getElementById("product-shape");

function changeColor(picker) {
  // Set the fill style
  overlay.style.fill = picker.toHEXString();
}複製代碼

最終，咱們看到的效果就是這樣的

代碼地址

在線圍觀地址