when the code running in an ipad,there are some lines(white or black) on the pictrue.And when I click the 'zoom' button , the lines will move.But it is normal when the code running in computors. How to figure out the problems?
New Document
<body>
<script type="text/javascript">
function zoom(){
var svg = document.getElementById("svg");
var viewBox = svg.getAttribute("viewBox").split(",")
svg.setAttribute("viewBox",[viewBox[0]-10,viewBox[1]-10,viewBox[2],viewBox[3]])
console.info(viewBox)
}
</script>
<svg id="svg" width="500" height="500" xmlns="http://www.w3.org/2000/svg" viewBox="-200,-200,500,500">
<defs>
<pattern id="raphael-pattern-0" x="0" y="0" patternUnits="userSpaceOnUse" width="116" height="116">
<rect x="0" y="0" width="118" height="118" fill="green"/>
</pattern>
</defs>
<path stroke-width="0" stroke-opacity="0" fill-opacity="1" fill="url(#raphael-pattern-0)" stroke="#000000" d="M204.610 -279.078 L204.610 170.922 L-245.390 170.922 L-245.390 -279.078 z"/>
</svg>
<input type="button" value="ZOOM" onclick="zoom()">
</body>
</html>
Related
Does anyone know how to get all the articles that are in the Section displaying as a list in the Category page at all?
Here's what I've got, and I'm trying to achieve the full list rather than the 'See all X articles, similar to how Slack are doing here.
This is my category page, which is the standard Copenhagen theme
<section id="main-content" class="hero">
<div class="hero-inner">
<h2 class="search_title">Help Centre</h2>
<h2 class="visibility-hidden">{{ t 'search' }}</h2>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon" aria-hidden="true">
<circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
<path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
</svg>
{{search submit=false instant=settings.instant_search class='search search-full' placeholder='Find anything'}}
<div class="search_topics"><strong>Common topics: </strong>1, 2, 3 rights</div>
</div>
</section>
<div class="container-divider"></div>
<div class="container">
<nav class="sub-nav">
{{breadcrumbs}}
<!-- <div class="search-container">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon" aria-hidden="true">
<circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
<path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
</svg>
{{search scoped=settings.scoped_kb_search submit=false}}
</div> -->
</nav>
<div class="category-container">
<div class="category-content">
<header class="page-header">
<h1>{{category.name}}</h1>
{{#if category.description}}
<p class="page-header-description">{{category.description}}</p>
{{/if}}
</header>
<div id="main-content" class="section-tree">
{{#each sections}}
<section class="section">
<h2 class="section-tree-title">
{{name}}
</h2>
{{#if articles}}
<ul class="article-list">
{{#each articles}}
<li class="article-list-item{{#if promoted}} article-promoted{{/if}}">
{{#if promoted}}
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="icon-star" title="{{t 'promoted'}}">
<path fill="currentColor" d="M2.88 11.73c-.19 0-.39-.06-.55-.18a.938.938 0 01-.37-1.01l.8-3L.35 5.57a.938.938 0 01-.3-1.03c.12-.37.45-.63.85-.65L4 3.73 5.12.83c.14-.37.49-.61.88-.61s.74.24.88.6L8 3.73l3.11.17a.946.946 0 01.55 1.68L9.24 7.53l.8 3a.95.95 0 01-1.43 1.04L6 9.88l-2.61 1.69c-.16.1-.34.16-.51.16z"/>
</svg>
{{/if}}
{{title}}
{{#if internal}}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" title="{{t 'internal'}}">
<rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/>
<path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/>
</svg>
{{/if}}
</li>
{{/each}}
</ul>
{{#if more_articles}}
<a href="{{url}}" class="see-all-articles">
{{t 'show_all_articles' count=article_count}}
</a>
{{/if}}
{{/if}}
</section>
{{else}}
<i class="category-empty">
{{t 'empty'}}
</i>
{{/each}}
</div>
</div>
</div>
</div>
According to Zendesk's own documentation the maximum number of articles that can be shown under each section is 6, for sections shown on category pages: https://developer.zendesk.com/documentation/help_center/help-center-templates/objects/#section-object
I'm not sure how Slack does it, but you could use the Zendesk Help Center API to achieve what you want. See https://developer.zendesk.com/api-reference/help_center/help-center-api/articles/#list-articles
My application displays a Graphviz SVG image representing a chain of subprocesses. I try to add a URL reference on each subprocess to display its details:
business_process_controller.rb
def show
### Retrieved by Callback function
# Generate graphviz
graph = GraphViz.new( :G, :type => :digraph )
#business_process.activities.order(:sort_code).each do |node|
case node.node_type.code
when 'START'
node_color = 'blue'
when 'END'
node_color = 'green'
when 'RESCUE'
node_color = 'red'
else
node_color = 'black'
end
graph.add_node(node.code, URL: activity_path(node.id), color: node_color)
end
#business_process.activities.order(:sort_code).each do |node|
if node.success_next
graph.add_edge(node.code, node.success_next.code)
end
if node.failure_next
graph.add_edge(node.code, node.failure_next.code).color = 'red'
end
end
graph.output(svg: "app/assets/images/temporary_images/#{#business_process.class.name}_flow#{#business_process.id}.svg")
end
The image is then displayed using an image_tag:
<div class="row">
<div align="center" class="col-md-12">
<%= image_tag("temporary_images/#{this_object.class.name}_flow#{this_object.id}.svg") %>
</div>
</div>
But even though the URL links are correctly generated in the SVG file, they are not active in the displayed page.
<g id="a_node1"><a xlink:href="/subprocess/12362" xlink:title="TRT_INTIALISATION">
How to display the SVG image so that hyperlinks are active in the web page?
Thanks for you help!
The generated SVG file:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.49.0 (20210828.1703)
-->
<!-- Title: G Pages: 1 -->
<svg width="338pt" height="116pt"
viewBox="0.00 0.00 337.99 116.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 112)">
<title>G</title>
<polygon fill="white" stroke="transparent" points="-4,4 -4,-112 333.99,-112 333.99,4 -4,4"/>
<!-- TRT_INTIALISATION -->
<g id="node1" class="node">
<title>TRT_INTIALISATION</title>
<g id="a_node1"><a xlink:href="/subprocess/12362" xlink:title="TRT_INTIALISATION">
<ellipse fill="none" stroke="blue" cx="179.94" cy="-90" rx="100.18" ry="18"/>
<text text-anchor="middle" x="179.94" y="-86.3" font-family="Times New Roman,serif" font-size="14.00">TRT_INTIALISATION</text>
</a>
</g>
</g>
<!-- TRT_SAS_SCRIPTS -->
<g id="node2" class="node">
<title>TRT_SAS_SCRIPTS</title>
<g id="a_node2"><a xlink:href="/subprocess/12349" xlink:title="TRT_SAS_SCRIPTS">
<ellipse fill="none" stroke="black" cx="92.94" cy="-18" rx="92.88" ry="18"/>
<text text-anchor="middle" x="92.94" y="-14.3" font-family="Times New Roman,serif" font-size="14.00">TRT_SAS_SCRIPTS</text>
</a>
</g>
</g>
<!-- TRT_INTIALISATION->TRT_SAS_SCRIPTS -->
<g id="edge1" class="edge">
<title>TRT_INTIALISATION->TRT_SAS_SCRIPTS</title>
<path fill="none" stroke="black" d="M158.88,-72.05C147.77,-63.11 133.96,-52.01 121.86,-42.27"/>
<polygon fill="black" stroke="black" points="123.79,-39.33 113.81,-35.79 119.41,-44.78 123.79,-39.33"/>
</g>
<!-- TRT_FINISH -->
<g id="node3" class="node">
<title>TRT_FINISH</title>
<g id="a_node3"><a xlink:href="/subprocess/12363" xlink:title="TRT_FINISH">
<ellipse fill="none" stroke="green" cx="266.94" cy="-18" rx="63.09" ry="18"/>
<text text-anchor="middle" x="266.94" y="-14.3" font-family="Times New Roman,serif" font-size="14.00">TRT_FINISH</text>
</a>
</g>
</g>
<!-- TRT_INTIALISATION->TRT_FINISH -->
<g id="edge2" class="edge">
<title>TRT_INTIALISATION->TRT_FINISH</title>
<path fill="none" stroke="red" d="M201,-72.05C212.28,-62.98 226.33,-51.68 238.56,-41.84"/>
<polygon fill="red" stroke="red" points="241.08,-44.3 246.67,-35.31 236.69,-38.85 241.08,-44.3"/>
</g>
</g>
</svg>
I'm trying to get a gooey effect with svg. Things are fine in chrome, but look weird on Safari & iOS. Here is the example: https://codepen.io/rubenhak/project/editor/ZoBENL
How it looks on Chrome:
How it looks on Safari/iOS:
The problem is when the one circle is too far, too small or missing, the other circle gets bulged. None of this is an issue on chrome.
Code:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 500 200" width="500" height="200">
<defs>
<filter id="goo" color-interpolation-filters="sRGB">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -7" result="cm" />
</filter>
</defs>
<g >
<circle fill="green" r="15" cx="30" cy="95" />
</g>
<g filter="url(#goo)">
<circle fill="blue" r="30" cx="80" cy="50" />
<circle fill="green" r="15" cx="80" cy="95" />
</g>
<g filter="url(#goo)">
<circle fill="blue" r="20" cx="160" cy="50" />
<circle fill="green" r="15" cx="160" cy="95" />
</g>
<g filter="url(#goo)">
<circle fill="blue" r="20" cx="220" cy="60" />
<circle fill="green" r="15" cx="220" cy="95" />
</g>
<g filter="url(#goo)">
<circle fill="blue" r="20" cx="300" cy="50" />
<circle fill="green" r="15" cx="300" cy="95" />
</g>
<g filter="url(#goo)">
<circle fill="blue" r="10" cx="350" cy="50" />
<circle fill="green" r="15" cx="350" cy="95" />
</g>
<g filter="url(#goo)">
<circle fill="green" r="15" cx="400" cy="95" />
</g>
<g >
<circle fill="green" r="15" cx="450" cy="95" />
</g>
</svg>
Safari is clipping the output of the feGaussianBlur to the default filter region before handing it to the feColorMatrix. Chrome doesn't do that. You can fix it by expanding the default filter region.
<filter id="goo" x="-50%" width="200%" y="-50%" height="200%" color-interpolation-filters="sRGB">
I have a HTML page with a horizontally scrolling div. The swipe gesture works perfectly on my device and I can scroll horizontally through my images. I however cannot scroll horizontally with the track-pad. I'm testing on a BB Bold. Could anyone please explain to me how I get this to work, if it is possible.
Sample:
<div class="row">
<div class="col-xs-12" style="overflow-x: scroll; -webkit-overflow-scrolling: touch; white-space:nowrap; padding: 10px 0" x-blackberry-focusable="true">
<img src="toDeleteImages/1.jpg" height="100" style="display: inline-block" x-blackberry- focusable="true" />
<img src="toDeleteImages/2.jpg" height="100" style="display: inline-block" x-blackberry-focusable="true" />
<img src="toDeleteImages/3.jpg" height="100" style="display: inline-block" x-blackberry-focusable="true" />
<img src="toDeleteImages/1.jpg" height="100" style="display: inline-block" x-blackberry-focusable="true" />
<img src="toDeleteImages/2.jpg" height="100" style="display: inline-block" x-blackberry-focusable="true" />
<img src="toDeleteImages/3.jpg" height="100" style="display: inline-block" x-blackberry-focusable="true" />
</div>
</div>
I'm trying to draw an SVG image using HTML5 and inline svg tag.
On a PC all elements are shown right, when I use my iPad some elements disappear.
See the code below:
<svg id="mimic_id" width="750" height="600" viewBox="0 0 750 600" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path transform="rotate(-20,120,120)" d="M -7,0 c 0 -7 14 -7 14 0 c -2 -2 -10 -2 -180 0" id="ButtonOnHighlight" style="fill:url(#linearOnGradientGlowWhite); stroke:none" />
<linearGradient id="linearGradientWhite">
<stop id="stop3032" style="stop-color:#ffffff;stop-opacity:1" offset="0" />
<stop id="stop3034" style="stop-color:#ffffff;stop-opacity:0" offset="1" />
</linearGradient>
<linearGradient id="linearLedGradientBlack">
<stop id="stop3163" style="stop-color:#000000;stop-opacity:0" offset="0.15" />
<stop id="stop3161" style="stop-color:#000000;stop-opacity:0.33" offset="1" />
</linearGradient>
<linearGradient x1="0" y1="-70" x2="0" y2="0" id="linearLedGradientGlowWhite" xlink:href="#linearGradientWhite" gradientUnits="userSpaceOnUse" />
<radialGradient cx="0" cy="0" r="80" fx="20" fy="20" id="linearLedGradientGlowBlack" xlink:href="#linearLedGradientBlack" gradientUnits="userSpaceOnUse" />
<g id="Led" transform="scale (0.1)">
<circle id="LedBase" cx="0" cy="0" r="70" />
<circle id="LedGlow" cx="0" cy="0" r="70" style="fill:url(#linearLedGradientGlowBlack);stroke:none" />
<path transform="rotate(-60,0,0)" d="M -65,0 c 0,-85 130,-85 130,0 c -20,-20 -110,-20 -130,0" id="fillLedHighlight" style="fill:url(#linearLedGradientGlowWhite); stroke:none" />
</g>
<g id="bottom_piston" style="fill:#aaa; stroke: black; stroke-width:1px;">
<rect x="0" y="0" height="5" width="90" />
<rect x="42" y="5" height="50" width="4" />
</g>
<g id="top_piston" style="fill:#aaa; stroke: black; stroke-width:1px;">
<rect x="42" y="0" height="50" width="4" />
<rect x="0" y="50" height="5" width="90" />
</g>
<g id="th_flap" style="fill:#aaa; stroke: #000; stroke-width:1px;">
<rect x="0" y="0" height="35" width="3" />
<circle cx="2" cy="40" r="5" />
<path d="M 3 6 l 7 0 s 10 0 0 12 l -7 0" />
<circle cx="9" cy="12" r="3" />
</g>
<g id="bh_flap" style="fill:#aaa; stroke: #000; stroke-width:1px;">
<rect x="0" y="0" height="46" width="3" />
<circle cx="2" cy="0" r="5" />
<path d="M 3 39 l 7 0 s 10 0 0 -12 l -7 0" />
<circle cx="9" cy="33" r="3" />
</g>
<g id="flap_piston" style="fill:#aaa; stroke: #000; stroke-width:1px;">
<rect x="0" y="0" width="55" height="4" />
<circle cx="0" cy="2" r="4" />
</g>
<g id="link_piston" style="fill:#aaa; stroke: #000; stroke-width:1px;">
<rect x="0" y="0" width="25" height="4" />
</g>
</defs>
<use id="M_DO" xlink:href="#Led" x="180" y="360" data-tav-animation-fillcolor-expr="[M_DO]" data-tav-animation-fillcolor-param="'fillOff';'fillGreen'" data-tav-label="Led" name="M_DO" />
<use id="BS_PISTON" xlink:href="#bottom_piston" x="265" y="344" data-tav-animation-translateY-expr="[M_TS]" data-tav-animation-translateY-param="0;0;1;15;1000" name="bottom_piston_translate_Y" />
<use id="TS_PISTON" xlink:href="#top_piston" x="265" y="160" data-tav-animation-translateY-expr="[M_TS]" data-tav-animation-translateY-param="0;0;1;-15;1000" name="top_piston_translate_Y" />
<g id="TH_FLAP_OBJ">
<g id="tras_TH_FLAP_LINK" name="tras_TH_FLAP_LINK" data-tav-animation-translateX-expr="[M_TH]" data-tav-animation-translateX-param="0;0;1;-50;2000">
<use id="TH_FLAP_LINK" xlink:href="#link_piston" x="470" y="198" data-tav-animation-rotate-expr="[M_TH]" data-tav-animation-rotate-param="495;200;0;0;1;-77;2400" name="top_flap_link" />
</g>
<!-- -->
<use id="TH_FLAP_PISTON" xlink:href="#flap_piston" x="495" y="198" data-tav-animation-translateX-expr="[M_TH]" data-tav-animation-translateX-param="0;0;1;-50;2000" name="top_flap_piston_translate_X" />
<use id="TH_FLAP" xlink:href="#th_flap" x="466" y="188" data-tav-animation-rotate-expr="[M_TH]" data-tav-animation-rotate-param="468;228;0;0;1;-90;2000" name="top_flap_rotate" />
</g>
<g id="BH_FLAP_OBJ">
<g id="tras_BH_FLAP_LINK" name="tras_BH_FLAP_LINK" data-tav-animation-translateX-expr="[M_BH]" data-tav-animation-translateX-param="0;0;1;-50;2000">
<use id="BH_FLAP_LINK" xlink:href="#link_piston" x="470" y="358" data-tav-animation-rotate-expr="[M_BH]" data-tav-animation-rotate-param="496;360;0;0;1;68;2300" name="bottom_flap_link" />
</g>
<use id="BH_FLAP_PISTON" xlink:href="#flap_piston" x="495" y="358" data-tav-animation-translateX-expr="[M_BH]" data-tav-animation-translateX-param="0;0;1;-50;2000" name="bottom_flap_piston_translate_X" />
<use id="BH_FLAP" xlink:href="#bh_flap" x="466" y="327" data-tav-animation-rotate-expr="[M_BH]" data-tav-animation-rotate-param="468;327;0;0;1;90;2000" name="bottom_flap_rotate" />
</g>
<g id="resistor" style="stroke: black; stroke-width:1px;" data-tav-animation-fillcolor-expr="[M_HE1]" data-tav-animation-fillcolor-param="'fillOff';'fillRed'" name="RESISTORS">
<rect x="230" y="215" height="7" width="157" />
<rect x="230" y="337" height="7" width="157" />
<rect x="230" y="222" height="115" width="7" />
<rect x="380" y="222" height="115" width="7" />
</g>
Here you can see the fiddle
As you can see (if you've an iPad, I didn't try with an iPhone but I think it will have the same behaviour) with a PC (tested with FF21, Chrome28 and IE10) all elements are shown
With the iPad only the rects in the center of the page are shown, other elements disappear.
I tested it with Safari and Chrome28.
Can you figure out where's the problem?
ATTENTION
With the iOS 7 the problem has been solved. Now all works correctly ;)
<use> breaks on Ipad, it is a browser (user-agent) issue, beyond our control. Two possible solutions:-
Recode the XML tags to avoid <use>
Convert the diagram into a JPG and add it as an <image>